routing - 路由器链接和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

这是我的应用程序 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 中显示的简单模板。它以某种方式工作的路由器视图，但它不适用于路由器链接

<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属性<router-link>作为道具来传递您要导航到的链接。

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>

Answer 2

尝试这个 ：

<router-link to="/" custom 
    v-slot="{ href, navigate, isActive }">
    <li :class="{ active: isActive }">
        <a :href="href" @click="navigate">
           Home
        </a>
    </li>
</router-link>