vue-router的router-view不能渲染;vue2.0中遇到的路由上的一些坑

答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

试一下在App.vue中的mounted钩子中加载默认route
[rootVue].$router.push('/foo');
[rootVue]必须替换成指向你的Vue实例

• 1月5日回答 
• 评论 
• 编辑

答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

今天开始上vue班车，尝试搭建框架的时候，我也遇到了router-view和router-link不能渲染的问题。

接着我看了vue官方的demo，修改了几处，就可以正常渲染了。

测试版本：

"vue": "^2.2.6",
"vue-router": "^2.4.0"

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';

const router = new VueRouter({
    mode: 'history',
    base: __dirname, //这个很重要
    routes         ／／这个是需要注意的，路由的规则名称不能写错；我就是出错出在这里了，找到老半天的错误
})

new Vue({
    router,
    el: '#app',
    render: h => h(App)
});

App.vue

<template>
    <div>
        <ul>
            <li><router-link to="/">homerouter-link>li>
            <li><router-link to="/foo">foorouter-link>li>
        ul>
        <router-view class="view">router-view>
    div>
template>

<script>
    export default {
        name: 'App'
    };
script>

routes.js

import Home from './components/home/Home.vue';
import Foo from './components/foo/Foo.vue';

export default [
    {
        path: '/',
        component: Home
    },
    {
        path: '/foo',
        component: Foo
    }
]