2017-07-29 257 views
1

我正在學習vue js和我創建了一個管理頁面,我能夠路由當我使用路由器視圖,但是當我嘗試href或路由器鏈接我不是能夠加載模板認爲url被改變。路由器鏈接和href不工作在Vue js

這是我main.js

import Vue from 'vue' 
    import VueResource from 'vue-resource' 
    import VueRouter from 'vue-router' 
    import App from './App.vue' 

    import admin from "./components/admin/admin.vue" 
    import users from "./components/users.vue" 


    Vue.use(VueRouter); 
    Vue.use(VueResource); 

    const router = new VueRouter({ 
     routes: [ 
      {path:'/admin',component:admin}, 
      {path:'/users',component:users}, 

     ] 
    }) 


    new Vue({ 
     el: '#app', 
     router: router, 

     render: h => h(App) 
    }) 

這是我app.vue

這是一個頁面通過HREF

我的應用程序VUE文件,該文件只是想航線
<template> 
     <div class = "container" id="app"> 

      <h1>Hi from</h1> 

      <hr> 
      <a href="/api/users">sdsd</a> 


     </div> 
    </template> 

    <script> 


    export default { 
     name: 'app', 

     data(){ 
     return{ 
      users: "" 
     } 
     } 
    } 
    </script> 

    <style> 
    #app { 

    } 
    </style> 

這是我的admin.vue

這個模板我想加載我的app.vue它是一個簡單的模板,我想在app.vue中顯示。其不知何故工作路由器看法,但它不與路由器連接

<template> 
    <div class="container"> 
     <h1> 
      HI i am routing from admin 
     </h1> 
    </div> 
</template> 

上面的東西是通過路由器的看法,但不事路由器鏈路或href定位標籤工作的工作......... .................................................. .................................................. .................................................. .............................

回答

0

1.您正在使用vue和vue-router建立SPA。路由僅由JavaScript處理。所以你不需要將URL傳遞給<a>標籤中的href。

2.您應該使用<router-link>進行導航,導航將最終呈現爲<a>標記。

3.您使用的to屬性作爲通道來傳遞您要導航到的鏈接。

4.您需要<router-view></router-view>才能顯示或渲染由roite匹配的組件。

所以你App.vue應該是:

<template> 
    <div class = "container" id="app"> 

     <h1>Hi from App.vue</h1> 

     <hr> 
     <router-link to="/users">Users</router-link> 
     <router-link to="/admi">Admin</router-link> 

    router-view></router-view> 
    </div> 
</template> 

<script> 


export default { 
    name: 'app', 

    data(){ 
    return{ 
     users: "" 
    } 
    } 
} 
</script> 

<style> 
#app { 

} 
</style>