路由器链接和href不工作在Vue js

Question

我正在学习vue js和我创建了一个管理页面，我能够路由当我使用路由器视图，但是当我尝试href或路由器链接我不是能够加载模板认为url被改变。

这是我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定位标签工作的工作......... .................................................. .................................................. .................................................. .............................

Answer 1

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>