[JavaScript知识库]vue路由【分模块、props】

路由分模块更清晰
router/index.js:

import Vue from 'vue';
import Router from 'vue-router';
// a路由
import routerA from './router-a.js';
// 使用路由
Vue.use(Router);

// 导出路由模块
export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/a'
        },
        ...routerA
    ]
});

router/router-a.js:

import pageA from...
// 导出路由模块
export default [
    {
        path: '/a',
        redirect: '/a/a1',
        // a页面（下面有两个子路由a1和a2）
        component: pageA,
        children: [
            // a1页面
            {
                path: 'a1',
                name: '',
                component: 
            },
            // a2页面
            {
                path: 'a2',
                name: '',
                component: 
            }
        ]
    },
    // b页面（根据status可以判断是新增还是编辑等等）
    {
        path: '/b/:status',
        name: 'pageB',
        component: pageB,
        props: (route) => ({
            // 页面状态
            status: route.params.status,
            query: route.query
        })
    }
];

在页面中可以：this.status获取路由中的status;this.query.xxx获取query中的字段

props: {
        // 当前的状态  add 新增
        // edit  编辑便签
        status: {type: String},
        // 请求参数
        query: {
            type: Object,
            default() {
                return {};
            }
        }
    },

跳转页面：

        this.$router.push({
            // 跳转到b页面（新增）
            path: '/b/add',
            query:{
                // 源页面
                originTarget: 'a1'
            }
        });

       this.$router.push({
          // 跳转到b页面（编辑）
            path: '/b/edit',
            query: {
                id: item.id,
                // 源页面
                originTarget: 'a2'
            }
        });

加originTarget的目的是返回的时候跳转到上次点进来的页面：

// 返回源页面
   goToOriginPage() {
       // 获取目标源目标页面
       const _originTarget = this.query.originTarget;
       // 2.返回源页面
       this.$router.push({path: _originTarget === 'a1' ? '/a/a1' : '/a/a2'});
   }