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

【问题标题】：Vue.js routing to pages not workingVue.js 路由到页面不起作用
【发布时间】：2017-03-25 19:54:42
【问题描述】：

我正在尝试学习 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，因为它们只是一个没有任何内容的段落。

我怎样才能做到这一点？什么是极其重要的我不能使用导入、需要、任何节点/babel 和东西，这是一个静态页面。

【问题讨论】：

你链接的页面是真的 vue 模板还是你只是需要路由器？

标签： javascript vue.js vue-router

【解决方案1】：

您的代码有 2 个问题

您使用了不正确的语法 - 您需要在路由配置中的组件内包装模板标签
您不能以您的方式包含 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>

【讨论】：

【解决方案2】：

据我所知，您不能在路由配置中引用 HTML 文件，路由器不会为您加载这些文件。相反，您需要为每条路线指定一个可以自带模板的组件（查看vue-router documentation）：

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

【讨论】：