在vue項(xiàng)目中，很多時(shí)候我們需要二級路由或者三級路由來跳轉(zhuǎn)頁面，但大部分需求下我們都只用到了二級路由，有小伙伴就會(huì)發(fā)現(xiàn)，用到三級路由的時(shí)候，就會(huì)突然不知所措，是有新的方法呢，還是跟二級路由配置的時(shí)候是一樣的呢，下面將展開詳細(xì)的介紹。

                            ----------------------------先進(jìn)行效果演示----------------------------

效果演示.gif

1、用vue create ***** 命令創(chuàng)建一個(gè)vue項(xiàng)目，創(chuàng)建后目錄結(jié)構(gòu)如下所示。

在這里插入圖片描述

2、對入口文件App.vue進(jìn)行修改

<template>
  <keep-alive>
      <router-view/>
  </keep-alive>
</template>

3、在views下新建三個(gè)文件夾，命名為Home，User，News，在三個(gè)文件夾下分別新建一個(gè)index.vue文件，目錄如下。

在這里插入圖片描述

4、在三個(gè)vue文件下撰寫相關(guān)代碼

Home/index.vue

<template>
    <div class="container">
        <div class="home">
            <h2>一級路由區(qū)--主頁</h2>
            <router-link to="/home/user" tag="button">點(diǎn)擊進(jìn)入用戶管理</router-link>
        </div>

        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name: "Home",
    };
</script>

<style scoped>
    .container{
        height: 100vh;
        display: flex;
        margin:10px 100px;
    }

    .home button{
        height: 50px;
        background-color: #999999;
        outline: none;
        border: none;
        color: #fff;
        padding: 0 10px;
        border-radius: 20px;

    }
</style>

User/index.vue

<template>
    <div class = "container">
        <div class="user">
            <h2>二級路由區(qū)--用戶管理</h2>
            <router-link to="/home/user/news" tag="button">點(diǎn)擊進(jìn)入新聞中心</router-link>
        </div>
        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>

<script>
export default {
  name: "User",
};
</script>

<style scoped>
    .container{
        height: 100vh;
        display: flex;
        margin:10px 100px;
    }

    .user button{
        height: 50px;
        background-color: #999999;
        outline: none;
        border: none;
        color: #fff;
        padding: 0 10px;
        border-radius: 20px;

    }
</style>

News/index.vue

<template>
  <div class="container">
    <div class="news">
        <h2>三級路由區(qū)——新聞中心</h2>
    </div>

    <keep-alive>
        <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "News",
};
</script>

<style scoped>
    .container{
        height: 100vh;
        display: flex;
        margin:10px 100px;
    }

    .news button{
        height: 50px;
        background-color: #999999;
        outline: none;
        border: none;
        color: #fff;
        padding: 0 10px;
        border-radius: 20px;

    }
</style>

5、在router下新建一個(gè)文件，命名為home，在home下新建一個(gè)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文件進(jìn)行配置，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'),

            // 繼續(xù)嵌套，三級路由
            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進(jìn)行測試。

測試完成之后就看到文章開頭的具體效果啦！