vue项目中使用vue-router进行路由配置及嵌套多级路由

在vue项目中，很多时候我们需要二级路由或者三级路由来跳转页面，但大部分需求下我们都只用到了二级路由，有小伙伴就会发现，用到三级路由的时候，就会突然不知所措，是有新的方法呢，还是跟二级路由配置的时候是一样的呢，下面将展开详细的介绍。

                            ----------------------------先进行效果演示----------------------------

效果演示.gif

1、用vue create ***** 命令创建一个vue项目，创建后目录结构如下所示。

在这里插入图片描述

2、对入口文件App.vue进行修改

3、在views下新建三个文件夹，命名为Home，User，News，在三个文件夹下分别新建一个index.vue文件，目录如下。

在这里插入图片描述

4、在三个vue文件下撰写相关代码

Home/index.vue

User/index.vue

News/index.vue

5、在router下新建一个文件，命名为home，在home下新建一个index.js文件，目录如下。

在这里插入图片描述

6、打开router文件夹下的index.js文件，将刚刚第三步新建的home引入。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import homeRouter from './home'

Vue.use(VueRouter)

const routes = [
    homeRouter,
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

7、之后对router下的home文件进行配置，home/index.js代码如下。

export default{
    path:'/home',
    // 在vue中@表示src目录
    component:() => import('@/views/Home/index.vue'),

    // 二级路由
    children:[
        {
            path:'user',
            name:'user',
            component: () => import('@/views/User/index.vue'),

            // 继续嵌套，三级路由
            children:[
                {
                    path:'news',
                    name:'newsone',
                    component: () => import('@/views/News/index.vue')
                }
            ]
        },
        {
            path:'news',
            name:'newstwo',
            component: () => import('@/views/News/index.vue')
        }
    ]
}

8、最后在在浏览器中输入/home，/home/user，/home/news，/home/user/news进行测试。

测试完成之后就看到文章开头的具体效果啦！