vue-router的学习笔记

<router-link to="/foo">Go to Foo</router-link>

this.$router.push({ path: '/main' })

const routers = [{
    path: '/',
    meta: {
        title: '后台登录'
    },
    component: (resolve) => require(['./views/login.vue'], resolve) //这个resolve原来是懒加载的意思. 不是一次性加载组件,访问哪个加载哪个
}, {
    path: '/main',
    meta: {
        title: '后台管理中心' //这个是title标题
    },
    component: (resolve) => require(['./views/main.vue'], resolve),
    //这就是子页面了
    children: [
        {
            path: '/',  //当一开始进入页面转到子页面,避免空页面
            //redirect: '/main/sub1'    //指定路径
            redirect:{ name: 'goods' }  //指定命名路径
        },
        {
            path: 'sub1',
            component: (resolve) => require(['./views/sub1.vue'], resolve),
            name:'sub1'
        },
        {
            path: 'sub2',
            component: (resolve) => require(['./views/sub2.vue'], resolve),
            name:'sub2'
        },
        {
            path: 'sub3',
            component: (resolve) => require(['./views/sub3.vue'], resolve),
            name:'sub3'
        },
    ]

}];

.....

    <i-col :span="spanLeft" class="layout-menu-left">
        <Menu active-name="1" theme="light" width="auto">
            <div class="layout-logo-left">
                <span class="logo-lg" v-show="spanLeft == 4">
                    <b>Admin</b>LTE
                </span>
                <span class="logo-mini" v-show="spanLeft == 1">
                    <b>LTE</b>
                </span>
            </div>
            <Menu-item name="1">
                <!-- 这里链接一定是 /main/这个下面的子链接 虽然在配置里没这么写  -->
                <router-link to="/main/sub1" >   
                    <Icon type="ios-navigate" :size="iconSize"></Icon>
                    <span class="layout-text" v-show="spanLeft == 4">选项 1选项</span>
                </router-link>
            </Menu-item>
            <Menu-item name="2">
                <router-link to="/main/sub2">
                    <Icon type="ios-keypad" :size="iconSize"></Icon>
                    <span class="layout-text">选项 2</span>
                </router-link>
            </Menu-item>
            <Menu-item name="3">
                <router-link to="/main/sub3">
                    <Icon type="ios-analytics" :size="iconSize"></Icon>
                    <span class="layout-text">选项 3</span>
                </router-link>
            </Menu-item>
        </Menu>
    </i-col>
    
    ........
    
    
            <div class="layout-content-main">
                <!-- 这里显示子页面 -->
                <router-view></router-view>
            </div>