【R】【vue】关于路由router

目录层级：

路由 切换

vue是单页面的，所谓路由不过是控制好页面在多大的空间里切换，“/”为根目录在整个页面切换，一般定义在文件App.vue中。继而是左侧或者上边的目录板块，再往下一级是具体的功能页面。

<!-- App入口 -->
<template>
    <div id="app">
        <router-view />
    </div>
</template>

children 子路由

路由里所有的children都不是凭空写的，都需要在父路由中声明一句<router-view />（就是占地儿），声明的位置就是子路由或者说子页面呈现的位置。所以我们第一张截图才会有这么多index.vue，就是为了承接子页面。如果没有那些index的话，就会像下图这样：

<template>
    <div class="submenu">
        <TopBar :title="title" left-arrow="false" right-text=""></TopBar>
        <div class="menu-flex">
            <div class="menuImg" v-for="item in submenu" @click="toDetail(item)">
                <p>{{ item.name }}</p>
            </div>
        </div>
        <div id="children"> // 将子页面挂载到非空界面，会导致页面产生重叠
            <router-view></router-view>
        </div>
    </div>
</template>

附：正确示例

/**
 * 前端路由
 */

import Vue from 'vue'
import VueRouter from 'vue-router'
import Axios from 'axios'
import store from '../store'
import { isDev, commonConfig } from '~/config'
import { transformLangType } from '~/utils'
import {Toast} from "vant";
import Login from '../views/common/Login.vue'

import SubMenu from '../views/home/children/Submenu.vue'

Vue.use(VueRouter)


// 构建路由
const router = new VueRouter({
    mode: 'history',
    base: '/', //commonConfig.base,
    routes: [
        { path: '/login', component: Login, meta: { authPage: true } },
        { path: '/', redirect: '/home' },
        { path: '/setting', component: () => import('../views/home/children/Setting') },
        {
            path: '/',
            component: () => import('@/views/home/Home'),
            children: [
                {
                    path: 'home',
                    component: () => import('@/views/home/main/MainMenu')
                },
                {
                    path: 'agv',
                    component: () => import('@/views/pages/agv/index'),
                    children: [
                        { path: '', component: SubMenu },
                        { path: 'DealPodAndBerth', component: () => import('@/views/pages/agv/bind/DealPodAndBerth') },
                        { path: 'InitPod', component: () => import('@/views/pages/agv/initPod/InitPod') },
                        { path: 'CycleOut', component: () => import('@/views/pages/agv/cycle/CycleOut') },
                        { path: 'CycleDetail', component: () => import('@/views/pages/agv/cycle/CycleDetail') },
                        { path: 'CycleUnfinishedDetail', component: () => import('@/views/pages/agv/cycle/CycleUnfinishedDetail') },
                        { path: 'MaterialOutbound', component: () => import('@/views/pages/agv/outbound/MaterialOutbound') },
                        { path: 'WorkFind', component: () => import('@/views/pages/agv/workFind/WorkFind') },
                        { path: 'FreeTransport', component: () => import('@/views/pages/agv/transport/FreeTransport') },
                        { path: 'ReturnPod', component: () => import('@/views/pages/agv/returnPod/ReturnPod') },
                    ]
                },
                {
                    path: 'artificial',
                    component: () => import('@/views/pages/artificial/index'),
                    children: [
                        { path: '', component: SubMenu },
                        { path: 'Puton', component: () => import('@/views/pages/artificial/artificialPutOn/index') },
                        { path: 'PutOnDetail', component: () => import('@/views/pages/artificial/artificialPutOn/PutOnDetail') },
                        { path: 'InventoryList', component: () => import('@/views/pages/artificial/artificialPutOn/InventoryList') },
                        { path: 'EmptyInventory', component: () => import('@/views/pages/artificial/artificialPutOn/EmptyInventory') },
                    ]
                },
                {
                    path: 'truck',
                    component: () => import('@/views/pages/truck/index')
                },
            ]
        },

    ]
})


// Axios拦截返回，拦截结果
Axios.interceptors.response.use(
    res => {
        let site = res.config.url.lastIndexOf("\/");
        let serverName = res.config.url.substring(site + 1, res.config.url.length);
        if (res.data.code.substr(-4) === '0010') {
            Toast({
                position: 'center',
                message: 'token过期,请重新登录',
                type: 'fail'
            });
            this.$router.push('login')
        }
        return res
    },
    err => {
        let info = err.response
        if (info) {
            // info.config.url, info.status
            console.error(info.config.url, info)
        }
        return Promise.reject(info)
    }
)

export default router