问题描述

我当前使用的是Vue和Vue路由器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>

推荐答案

我认为存在误会。据我所知，您正在尝试以加载.vue文件的方式加载User.html，但这不起作用，除非您使用webpack构建您的项目，因为.vue文件类型是vue-loader项目负责解析的内容。

Vue Router CDN意味着您不是与webpack一起构建的，因此不可能加载您正在做的组件。您可以将Vue路由器配置为提供User.html文件，但该文件不能作为模板组件，因为在CDN模式下，Vue路由器不知道您的服务器上有哪些文件，也不能简单地检索这些文件。

因此您需要执行以下三个选项之一：

选项1：开始为您的项目使用webpack

这就是我建议您做的。您会发现您的项目会执行得更好，并且使用它进行开发会更容易。

选项2：为CDN使用正确的模板语法

例如：

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'],
});

如果不是使用webpack构建，则不能将其他文件作为模板加载。Webpack将它们放到您的单页应用程序中，Vue路由器不知道User.html里面是什么，Vue也不能将其用作模板。可以告知VUE路由器重定向到功能齐全的User.html网站页面，但不能仅将其用作模板。

选项3：使用AJAX请求获取模板文件

这是我强烈建议您不要做的事情，但为了完整性，如果您使用AJAX请求获取User.html文件的内容并从中创建组件，则可以使用CDN版本。

我真的、真的建议你停止使用CDN版本，转而使用基于webpack的解决方案，屈服于黑暗面！或者让它更简单，改用Nuxt.js，因为它对初学者来说更容易使用。

这篇关于我可以使用VUE和VUE路由器CDN导入单个文件组件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！