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


0

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

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
    }
]
阅读更多
个人分类: vue & node
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭