vue-router：路由器-link 不工作

Question

我正在尝试使用 vue-router 和 router-link。当我单击 link 时，URL 正确更新，但没有任何内容加载到 <router-view></router-view>。我猜这与使用 unpkg CDN 而不是使用 vue-CLI 构建它有关？我不太确定为什么这不起作用。

index.html

....

<body>

    ....

    <nav id="app">
        <li><router-link to="/hello">Hello</router-link></li>
    <nav>

    <!--view-->
    <router-view></router-view>

    ....
    <!--vue.js-->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <!--router-->
    <script src="js/router.js"></script>
</body>

router.js

const Hello = { template: '<div>test</div>' }

const routes = [
  { path: '/hello', component: Hello }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

我试过删除 router-link 周围的 <li> </li>，但这似乎没有帮助。

Answer 1

当我将 app id 附加到所有内容的包装器 <div> 时，它会起作用，如下所示：

....

    <div id="app">

        <nav>
            <li><router-link to="/hello">Hello</router-link></li>
        <nav>
    </div>

Answer 2

您正在使用 const app = new Vue({})，这将创建一个新的 vue 实例

那么你正在使用 $mount()，它将元素选择器作为参数。

$mount() 所做的是，它手动将 Vue 实例安装到您作为参数传递的关联 DOM 元素

在您的代码中，只有 nav 元素的 ID 为 app，这意味着只有 nav 元素被挂载到您的 Vue 实例，而不是 router-view在 nav 元素之外。

这就是为什么您添加 ID 为 app 的包装器的答案有效，因为现在 router-view 也与 Vue 实例相关联。

您可以参考：

vm.$mount() , Vue instance

Answer 3

在我的例子中，router-link 不工作，因为我在 <div id="app"></div>

之外有侧边栏

所以 这个故事的寓意是我们必须将所有与 vue 相关的元素或东西放在 div 中，我们在 app.js[=21= 中用于安装]

所以 html 的结构应该如下所示：

<html> <body> <div id="app"> <aside>  <li><router-link to="/users">Users</router-link></li> <li><router-link to="/home">Home</router-link></li> </aside> <div class="content">  <event-hub></event-hub> <router-view></router-view> </div> </div> </body> </html>

vue-router：路由器-link 不工作

vue-router : router-link not working

vue.js

vue-router

vuejs2