Vue.js路由到页面不起作用。

Question

Vue.js路由到页面不起作用。

10

我正在尝试学习vue.js，但在实现路由时遇到了问题。我想使用嵌套在其他HTML文件中的模板，而不是行内模板。

我的问题是路由从未针对我的页面，并且我没有收到任何错误信息。我不知道如何解决这个问题，请问您能帮助吗？

这是我的index.html

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/vue-router.js"></script>
    <script src="js/routes.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/home">Go to home</router-link>
    <router-link to="/about">Go to about</router-link>
    <router-view></router-view>
</div>
<script src="js/app.js"></script>
</body>
</html>

这是routes.js

var routes = [
{
    path: '/home',
    template: 'pages/home.html'
},
{
    path: '/about',
    template: 'pages/about.html'
}
];

这是我的app.js

const router = new VueRouter({
    routes // short for routes: routes
});

const app = new Vue({
    el: '#app',
    router: router
});

我不会贴出home.html和about.html的内容，因为它们只是一个段落而已。

我该如何让这个工作呢？而且非常重要的是，我不能使用imports、requires、任何node/babel之类的东西，因为这是一个静态页面。

- user3212350

你链接的页面实际上是Vue模板还是只需要路由器？ - retrograde

2个回答

1

据我所知，在路由配置中无法引用 HTML 文件，路由器不会为您加载这些文件。相反，您需要为每个路由指定一个组件，该组件可以带有自己的模板（请参阅 vue-router 文档）：

var routes = [{    path: '/home',    component: { template: '<div>home</div>' }}, {    path: '/about',    component: { template: '<div>about</div>' }}];

如果您不想直接将HTML模板放入JS代码中，您可以按照以下方式包含它们：

index.html:

<script type="x-template" id="home">
    <div>home</div>
</script>
<script type="x-template" id="about">
    <div>about</div>
</script>
<script src="js/app.js"></script>

routes.js:

var routes = [{
    path: '/home',
    component: { template: '#home' }
}, {
    path: '/about',
    component: { template: '#about' }
}];

- Aletheios

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- damienix · Accepted Answer

你的代码有两个问题

你使用了不正确的语法 - 你需要在路由配置中将模板标签包裹在组件内部
你不能以你这种方式包含html文件。Vue.js不会自动加载它们。

看看这个:

const routes = [
{
    path: '/home',
    component: {
        template: "<div>home</div>"
    }
},
{
    path: '/about',
    component: {
        template: "<div>about</div>"
    }
}
];

const router = new VueRouter({routes});

const app = new Vue({
    el: '#app',
    router: router
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>

<div id="app">
  <router-link to="/home">Go to home</router-link>
  <router-link to="/about">Go to about</router-link>
  <router-view></router-view>
</div>