vue-router使用以后路由出口不显示内容

Question

题目描述

我是一个vue新手，在练习vue-router的时候，跳转页面没有问题，就是不显示对应的模板内容。搞不懂怎么回事。

代码是这样的：

<div id="main">
    <h1>我是主页面</h1>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/">home</router-link>
    <router-link to="/foo">Go tu Foo</router-link>
    <router-link to="/bar">Go tu Bar</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <p>
        路由出口
        <router-view></router-view>
    </p>
</div>

<script>
    Vue.use(VueRouter)
    const home = {
        template:'<div>我是 homt </div>'
    }
    const foo = {
        template: '<div>我是 Foo</div>'
    }
    const bar = {
        template: '<div>我是 Bar</div>'
    }

    const routers = {
        path: '/',
        component: home,
        path: '/foo',
        component: foo,
        path: '/bar',
        component: bar,
    }

    const router = new VueRouter({
        routers
    })

    var vm = new Vue({
        el: '#main',
        router,
    })
</script>

页面是这样的

路由出口下面什么也不显示，搞不懂我哪里写错了
跳转其他路由也不显示的

Answer 1

看你的代码中首先路由的配置写错啦，对于匹配规则应该是一个数组。另外你实例化路由时，传递的配置对象中，指定路由规则的属性也用错了，不是 routers 而是 routes 下面贴一下正确的写法吧。

const home = {
    template: '<div>我是 homt </div>'
}
const foo = {
    template: '<div>我是 Foo</div>'
}
const bar = {
    template: '<div>我是 Bar</div>'
}

/**
 * 配置对象中的 route 是一个数组表示【路由匹配规则】，其中每条规则就是一个对象
 *    * path——表示路由链接地址。
 *    * component——表示，匹配到的 path 后展示的组件。
 */
const routes = [{
    path: '/', // 根路径，项目打开时匹配该规则
    component: home
}, {
    path: '/foo',
    component: foo
}, {
    path: '/bar',
    component: bar
}]

const router = new VueRouter({
    routes
})

var vm = new Vue({
    el: '#main',
    router
})

Answer 2

这里应该是个数组，你写这对象啥意思。。。