rpi*_*var 1 vue.js vue-router vuejs2
我正在尝试使用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,但这似乎没有帮助.
您正在使用const app = new Vue({)},这将创建一个新的vue实例
然后你正在使用$mount()哪个接受元素选择器作为参数.
是什么$mount(),它手动将vue实例挂载到您作为参数传递的关联DOM元素
在您的代码中,只有nav元素具有id,app这意味着只有nav元素被安装到您的vue实例而不是元素router-view之外nav.
这就是为什么你的回答addimg一个id为work的包装器app,因为现在router-view它也与vue实例相关联.
你可以参考: