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

路由 Vue-Router

1、Vue-Router 介紹

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

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



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

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

2、路由配置

首先了解一下路由組成：

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

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

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)//維護(hù)路由表，某個(gè)路由路徑對(duì)應(yīng)哪個(gè)視圖組件
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)簽

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

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

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

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

3、嵌套路由

3.1、簡(jiǎn)介

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

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

3.2、實(shí)現(xiàn)步驟

第一步：安裝并導(dǎo)入 elementui，實(shí)現(xiàn)頁(yè)面布局（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'),//嵌套路由（子路由），對(duì)應(yīng)的組件會(huì)展示在當(dāng)前組件內(nèi)部children: [//通過(guò)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 布局容器視圖中添加，實(shí)現(xiàn)子視圖組件展示

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

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

<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)容
問(wèn)題思考：
1.對(duì)于前面的案例，如果用戶訪問(wèn)的路由是 /c，會(huì)有什么效果呢？

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

3.3、?注意事項(xiàng)

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

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

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

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

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

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

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

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

?