我目前正在使用Vue和Vue Router CDN。我想使用Vue路由器将单个文件组件（user.html）导入到index.html中。但是，当我单击“转到用户”时，数据没有显示。我阅读了一些有关Vue路由器的指南，但他们使用NPM或CIL代替了Vue CDN。 Index.html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to='/User.html'>Go to User</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const User = { template: '#test'}
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{
path:'/User.html', component: User
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
User.html
<template id = "test">
fsjdfjdfldskjflkd
</template>
答案 0 :(得分：0)
我认为这是一个误会。据我所知，您正在尝试以加载User.html文件的方式加载.vue，但是除非您使用Webpack自{ {1}}项目负责解析{1}}文件类型。
Vue Router CDN意味着您不使用Webpack进行构建，因此无法像您正在加载的那样加载组件。您可以将Vue Router配置为提供User.html文件，但是该文件不能作为模板组件，因为在CDN模式下，Vue Router不知道服务器上有哪些文件，也不能简单地获取它们。
因此，您需要执行以下三个选项之一：
这是我建议您做的。您会发现您的项目将执行得更好，并且使用它进行开发会更容易。
例如：
.vue如果不使用Webpack进行构建，则无法将其他文件作为模板加载。 Webpack为您将它们放入您的单页应用程序中，Vue Router不知道vue-loader的内容，Vue也无法将其用作模板。可以告诉Vue Router重定向到功能完整的var mytemplate = `<div>
<h1>This is my template</h1>
</div>`
Vue.component('mycomp1', {
template: mytemplate
});
Vue.component('mycomp2', {
template: `
<div>
Hello, {{ name }}!
</div>
`,
props: ['name'],
});
网站页面，而不仅仅是将其用作模板。
我强烈建议您不要这样做，但是出于完整性考虑，如果使用Ajax请求获取User.html文件的内容并从中创建组件，则可以使用CDN版本。