vue全家桶的使用＜router-view＞routerviewvueX嵌套路由子路由动态路由路由拦截路由守卫elementUiSPA

Posted 2022-05-03 web半晨

目录

• 1、关键代码（router/index.js）文件
• 2、完整代码

---

1、关键代码（router/index.js）文件

import Vue from 'vue';
import VueRouter from 'vue-router';
import ContainerPage from '@/view/containerPage/index';
import PageA from "@/view/pagea/index";
import PageB from "@/view/pageb/index";
import PageC from "@/view/pagec/index";

Vue.use(VueRouter);

const routes = [
    
        path: '/',
        redirect: '/containerPage'
    ,
    
        path: '/containerPage',
        name: "containerPage",
        component: ContainerPage,
        children: [
            
                path: '/containerPage',
                redirect: '/containerPage/pagea'
            ,
            
                id: 1,
                path: 'pagea',
                name: 'pagea',
                class: "el-icon-menu",
                component: PageA,
                title: "页面A"
            ,
            
                id: 2,
                path: 'pageb',
                name: 'pageb',
                class: "el-icon-document",
                component: PageB,
                title: "页面B"
            ,
            
                id: 3,
                path: 'pagec',
                name: 'pagec',
                class: "el-icon-setting",
                component: PageC,
                title: "页面C"
            
        ]
    ,

];

export default new VueRouter( routes );

---

2、完整代码

gitee（码云）develop分支vueFamilybucket文件夹