Question

我正在学习vue js并且我创建了一个管理页面，当我使用路由器视图时我能够路由但是当我尝试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

这是我的app 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处理。因此，您无需在<router-link>代码中将网址传递给href。

2.您应该使用<a>进行导航，最终会将其呈现为to代码。

3.您使用<router-link> <router-view></router-view>属性作为道具来传递您要导航的链接。

4.您需要<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>来显示或渲染与roite匹配的组件。

所以你的 App.vue 应该是：

{{1}}

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>

router-link和href在Vue js

2 个答案: