Question

我尝试使用vue-router和router-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')

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

Answer 1

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

然后你使用$mount()，它接受一个元素选择器作为参数。

$mount()的作用是什么，它将vue实例手动挂载到您作为参数传递的关联DOM元素

在您的代码中，只有nav元素的ID为app，这意味着只有nav元素安装到您的vue实例而不是router-view以外的nav app元素。

这就是为什么你的addimg id为router-view的包装器的答案有效，因为现在onChnage也与vue实例相关联。

您可以参考：

vm.$mount()，Vue instance

Answer 2

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

....

    <div id="app">

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

Answer 3

在我的情况下，路由器链接无法正常工作，因为我在<div id="app"></div>之外有侧边栏

所以故事的道德是我们必须将所有与vue相关的元素或内容放到我们用于app.js的div中

因此html的结构应如下：

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

vue-router：router-link无法正常工作

3 个答案: