router-link 和 href 在 Vue js 中不起作用

Question

我正在学习 vue js，我创建了一个管理页面，当我使用 router-view 时我可以路由该页面，但是当我尝试 href 或 router-link 时，我无法加载模板，认为 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

这是我的应用程序 vue 文件，它只想通过 href 路由到页面

    <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 中显示的简单模板。它以某种方式工作 router-view 但它不与 router-link 一起工作

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

上面的东西是通过 router-view 工作的，但不是 router-link 或 href 锚标记.............................. ...................................................... ...................................................... ...................................................... …………

Answer 1

1.您正在使用 vue 和 vue-router 构建 SPA。路由仅由 javascript 处理。所以你不需要将 URL 传递给<a>标签中的 href 。

2.您应该用于<router-link>导航，最终将呈现为<a>标签。

3.您使用to属性<router-link>作为 prop 来传递您想要导航到的链接。

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>