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="/">home</router-link></li>            <li><router-link to="/foo">foo</router-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    }]