如何在html中定义vue-router组件？
如何在html中定义vue-router组件？
提问于 2019-02-18 12:01:22
我正在使用django + vue.js + vue-router.js来完成我的项目。我正在尝试在单个html页面中使用vue-router。我找了一段时间，所有的例子都是使用.vue组件，或者简单地在js部分中定义组件模板，就像这样：
<body>
<div id="app">
<div>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>我想要的是在js部分之外定义模板，如下所示：
<body>
<div id="app">
<div>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<template id="Foo">
<div>this is Foo</div>
</template>
<template id="Bar">
<div>this is Bar</div>
</template>
<script>
const Foo = { template: '#Foo' }
const Bar = { template: '#Bar' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>我试过了，但没试过。那么如何在html中定义vue路由器组件呢？我是vue新手..
回答 1
Stack Overflow用户
发布于 2019-02-18 14:16:19
您需要在html文件中添加<router-view/>。例如：
const Foo = { template: '<div>this is Foo</div>' }
const Bar = { template: '<div>this is Bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<div id="app">
<router-view/>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54740309
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号