?🍃作者介紹：雙非本科大三網(wǎng)絡(luò)工程專業(yè)在讀，阿里云專家博主，專注于Java領(lǐng)域?qū)W習(xí)，擅長web應(yīng)用開發(fā)、數(shù)據(jù)結(jié)構(gòu)和算法，初步涉獵Python人工智能開發(fā)和前端開發(fā)。
🦅主頁：@逐夢蒼穹
📕所屬專欄：前端（專欄的其他文章，詳見文末?）
🍔您的一鍵三連，是我創(chuàng)作的最大動力🌹

路由 Vue-Router

1、Vue-Router 介紹

vue 屬于單頁面應(yīng)用，所謂路由，就是根據(jù)瀏覽器路徑不同，用不同的視圖組件替換這個頁面內(nèi)容。
不同的訪問路徑，對應(yīng)不同的頁面展示。

在vue應(yīng)用中使用路由功能，需要安裝Vue-Router：



注：創(chuàng)建完帶有路由功能的前端項目后，在工程中會生成一個路由文件，如下所示：

關(guān)于路由的配置，主要就是在這個路由文件中完成的。
為了能夠使用路由功能，在前端項目的入口文件main.js中，創(chuàng)建Vue實例時需要指定路由對象：

2、路由配置

首先了解一下路由組成：

• VueRouter：路由器，根據(jù)路由請求在路由視圖中動態(tài)渲染對應(yīng)的視圖組件
• <router-link>：路由鏈接組件，瀏覽器會解析成
• <router-view>：路由視圖組件，用來展示與路由路徑匹配的視圖組件

具體配置方式：
1、在路由文件/router/index.js中配置路由路徑和視圖的對應(yīng)關(guān)系：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)//維護(hù)路由表，某個路由路徑對應(yīng)哪個視圖組件
const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path: '/404',component: () => import('../views/404View.vue')},{path: '*',redirect: '/404'}
]const router = new VueRouter({routes
})export default router

2、在視圖組件中配置 router-link標(biāo)簽，用于生成超鏈接

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link> |

3、在視圖組件匯總配置router-view標(biāo)簽

要實現(xiàn)路由跳轉(zhuǎn)，可以通過標(biāo)簽式和編程式兩種：

• 標(biāo)簽式：About
• 編程式：this.$router.push(‘/about’)

問題思考： 如果用戶訪問的路由地址不存在，該如何處理？
可以通過配置一個404視圖組件，當(dāng)訪問的路由地址不存在時，則重定向到此視圖組件，具體配置如下：

{path: '/404',component: () => import('../views/404View.vue')
},
{path: '*',redirect: '/404' //重定向
}

3、嵌套路由

3.1、簡介

嵌套路由：組件內(nèi)要切換內(nèi)容，就需要用到嵌套路由（子路由），效果如下：
在App.vue視圖組件中有標(biāo)簽，其他視圖組件可以展示在此
ContainerView.vue組件可以展示在App.vue視圖組件的位置

ContainerView.vue組件進(jìn)行了區(qū)域劃分（分為上、左、右），在右邊編寫了標(biāo)簽，點擊左側(cè)菜單時，可以將對應(yīng)的子視圖組件展示在此

3.2、實現(xiàn)步驟

第一步：安裝并導(dǎo)入 elementui，實現(xiàn)頁面布局（Container 布局容器）—ContainerView.vue：

<template><el-container><el-header>Header</el-header><el-container><el-aside width="200px"></el-aside><el-main></el-main></el-container></el-container>
</template><script>
export default {}
</script><style>
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
</style>

第二步：提供子視圖組件，用于效果展示 ->P1View.vue、P2View.vue、P3View.vue：

<template><div>這是P1 View</div>
</template><script>
export default {}
</script><style>
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
</style>

第三步：在 src/router/index.js 中配置路由映射規(guī)則（嵌套路由配置）

{path: '/c',component: () => import('../views/container/ContainerView.vue'),//嵌套路由（子路由），對應(yīng)的組件會展示在當(dāng)前組件內(nèi)部children: [//通過children屬性指定子路由相關(guān)信息（path、component）{path: '/c/p1',component: () => import('../views/container/P1View.vue')},{path: '/c/p2',component: () => import('../views/container/P2View.vue')},{path: '/c/p3',component: () => import('../views/container/P3View.vue')}]
}

第四步：在ContainerView.vue 布局容器視圖中添加，實現(xiàn)子視圖組件展示

<el-main><router-view/>
</el-main>

第五步：在ContainerView.vue 布局容器視圖中添加，實現(xiàn)路由請求

<el-aside width="200px"><router-link to="/c/p1">P1</router-link><br><router-link to="/c/p2">P2</router-link><br><router-link to="/c/p3">P3</router-link><br>
</el-aside>

注意：子路由變化，切換的是【ContainerView 組件】中 部分的內(nèi)容
問題思考：
1.對于前面的案例，如果用戶訪問的路由是 /c，會有什么效果呢？

如何實現(xiàn)在訪問 /c 時，默認(rèn)就展示某個子視圖組件呢？
配置重定向，當(dāng)訪問/c時，直接重定向到/c/p1即可，如下配置：

3.3、?注意事項

1. 子路由的路徑不需要以 / 開頭。因為以 / 開頭的路徑將會被視為根路徑。
   
2. 子路由的完整路徑是由其所有的祖先路由的路徑和自己的路徑拼接而成的。例如，/user/:id/profile 路徑是由 /user/:id 和 profile 拼接而成的。
   
3. 子路由的寫法，要么"/父/子"，要么"子"：
   
   更多關(guān)于嵌套路由的信息，你可以查閱Vue Router官方文檔。
   

4、?router-view標(biāo)簽詳解

<router-view/> 是 Vue Router 的一個核心組件，它是一個功能性的組件，用于渲染匹配的路由組件。
當(dāng)你的應(yīng)用訪問一個路由路徑時，Vue Router 會查找與該路徑匹配的路由配置，然后將該路由配置中的組件渲染到 <router-view/> 所在的位置。
例如，假設(shè)你有以下的路由配置：

const routes = [{ path: '/home', component: Home },{ path: '/about', component: About }
]

當(dāng)你訪問 /home 路徑時，Home 組件會被渲染到 <router-view/> 所在的位置；當(dāng)你訪問 /about 路徑時，About 組件會被渲染到 <router-view/> 所在的位置。
此外，<router-view/> 還可以嵌套使用，以支持顯示嵌套路由。在嵌套路由的配置中，子路由的組件將會被渲染到父路由組件內(nèi)部的 <router-view/> 中。
例如，假設(shè)你有以下的嵌套路由配置：

const routes = [{ path: '/user', component: User,children: [{path: 'profile',component: UserProfile},{path: 'posts',component: UserPosts}]}
]

當(dāng)你訪問 /user/profile 路徑時，User 組件會被渲染到最外層的 <\router-view/> 中，而 UserProfile 組件會被渲染到 User 組件內(nèi)部的 <router-view/> 中。

?
????????????????????前端的其他文章：
📕 1-創(chuàng)建vue工程
📕 2-vue的基本使用

?