问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue-router：路由器链接不工作

社区维基
1
新手上路，请多包涵

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

索引.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>

路由器.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 ，但这似乎没有帮助。

原文由 rpivovar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译vue.jsvuejs2vue-router
阅读 447
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

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

In your code, only the nav element has the id of app which means only the nav element is mounted to your Vue instance not the router-view 在 nav 元素之外。

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

您可以参考：

vm.$mount() , Vue 实例

原文由 Vamsi Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

在我的情况下，路由器链接 不起作用，因为我在 <div id="app"></div> 之外有侧边栏

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

所以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>

原文由 Haritsinh Gohil 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题