vue-router: vue3路由管理器_vue3 vue-router-CSDN博客

本文链接：https://blog.csdn.net/2201_75880772/article/details/147455424

一、基本介绍

1. 单页应用程序介绍

1> 概念: 整个应用只有一个入口网页文件(就是项目中的index.html文件), 换句话说, 项目所有的功能都集中在一个 html 文件中进行实现的.

2> 举例:

单页面应用程序: 网易云音乐, 知乎...(页面是局部刷新,不会加载整个网站)

多页面应用程序: 京东,淘宝,门户网站...(一个网页应用文件跳转到另一个网页应用文件,重新加载整个页面,整个页面会全部刷新)

3> 单页面应用 VS 多页面应用

什么是SEO: 搜索引擎优化, Search Engine Optimization 的简称, 可以通过优化网站的内容和结构,提高网站在搜索引擎中的排名, 从而增加网站的流量和曝光度的一种技术. 简而言之, 就是当用户进行搜索的时候, 可以把网站出现在搜索结果的前列, 增加更多的潜在用户

开发分类	实现方式	用户体验	网站性能	开发效率	学习成本	首屏加载	是否利于SEO
单页面应用	一个html文件	好	好	高	高	慢	不利于
多页面应用	多个html文件	差	差	低	低	快	利于

单页应用类网站：系统类网站 / 内部网站 / ⽂档类网站 / 移动端站点

多页应用类网站：公司官网 / 电商类网站

2. 路由介绍

1> 什么是路由: 路由其实就是一个映射(对应)关系

比如: 生活中的路由就是设备和ip地址的映射关系, 不同的设备连接到同一个路由器,会得到一个唯一的ip地址

2> vue3中的路由指的是什么: 路径和页面(组件)的映射关系(路径变了,页面会变), 简而言之: 就是访问不同的路径, 要显示不同的页面(组件)

3> 在vue3中如何实现路由切换: 借助 vue-router 第三方模块, 它也是vue3的官方路由管理器(实现访问不同路径,显示不同页面)

4> 介绍 vue-router: vue3的官方路由管理器

我们可用去官网来看看它的介绍: Vue.js - 渐进式 JavaScript 框架 | Vue.js

点击进去看

3. 组件存放目录

页面和组件存放目录的问题:

1> 背景: 因为vue3 + vue-router 开发项目是一个单页面应用程序, 而又要在单页面程序中实现切换, 其实是借助 vue 文件来实现切换的, 在这里就进而我们之前学习的组件的扩展名一样了, 为了区分便于管理, 就需要进行不同的划分和存储.

2> 关于 vue 文件的分类

1) 页面组件: 一个做好的,大的,成型的页面, 比如京东的首页.. 只是用来做大块的展示, 无需复用, 配合路由切换.

2) 复用组件: 之前我们学习的组件就是复用组件, 它是一个个独立的小型页面, 可复用的, 用来组装页面组件的

3> 存放目录的问题:

1) 页面组件: 存放在 src/views 目录下

2) 复用组件: 存放在 src/components 目录下

关系: 若干个复用组件组装-> 页面组件

小结:

页面组件 -> src/views -> 配合路由切换

复用组件 -> src/components-> 组装页面组件

二、基本使用和模块封装

1. vue-router 的基本使用(4+2)

1> 4个固定步骤

1) 下载 vue-router 模块: npm i vue-router

2) 导入相关函数, 在main.js中编写代码

3) 创建路由实例

4) 注册让路由规则生效

createRouter 创建路由实例, createWebHashHistory()创建的模式是哈希模式, 后面路径会带上 #

最后我们发现我们的url多了个#

2> 2个核心步骤

vue3 中路由的本质就是路径和组件(页面)的对应关系, 这个规则需要通过路由表自行配置

1) 创建页面,配置规则:

2) 给定出口: 在根组件上写<router-view/>

运行结果: 输入不同的路径,展示映射的组件页面

具体代src/Find.vue, Friend.vue,My.vue

<script setup>

</script>
<template>
    <div class="find">
        <p>发现音乐</p>
        <p>发现音乐</p>
        <p>发现音乐...</p>
    </div>
</template>

<style scoped></style>

<script setup>

</script>
<template>
    <div class="friend">
        <p>朋友的音乐</p>
        <p>朋友的音乐</p>
        <p>朋友的音乐...</p>
    </div>
</template>

<style scoped></style>

<script setup>

</script>
<template>
    <div class="my">
        <p>我的音乐</p>
        <p>我的音乐</p>
        <p>我的音乐...</p>
    </div>
</template>

<style scoped></style>

App.vue

<script setup>
    
</script>

<template>
    <!-- 提供的一个内置全局组件,是路由的出口 -->
     <!-- 相当于一个占位符, 输入路径对应的组件,就会把这个占位符替换成那个组件 -->
<router-view/>
</template>

<style scoped>

</style>

main.js


// 按需导入 createApp 函数
import { createApp } from 'vue'
// 导入 App.vue
import App from './App.vue'
// 1. 下载包: npm i vue-router
// 2.导入 2 个相关函数
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入 3 个页面组件
import Find from './views/Find.vue'
import Friend from './views/Friend.vue'
import My from './views/My.vue'
// 3. 创建路由实例
const router = createRouter({
	// 知名路由模式: 当前创建的是哈希模式, 路径后会带 #
	history: createWebHashHistory(),
	// 配置路由规则
	routes: [
		//一个规则就是一个对象,定义切换页面的路径
		{
			path:'/find',
			component: Find
		},
		{
			path:'/my',
			component: My
		},
		{
			path:'/friend',
			component: Friend
		}
	]
})
// 创建应用
const app = createApp(App)
// 4. 注册路由实例: 让路由表规则生效
app.use(router)
// 指定渲染的位置
app.mount('#app')

2. vue-router的基本原理(很重要)

vue-router的运作原理: 当路径(url)发生变化的时候, 相应的页面是如何渲染出来的?

当浏览器的url地址变化时, 会于routers 数组(路由表规则) 中的path进行匹配, 如果命中了 url 和

path 值一样, 那么就会把相应的组件渲染到 <router-view/>的位置; 否则, 则显示空白页面

3. 抽离和封装路由模块

1> 为什么要封装路由模块?

如果把所有和路由相关的代码全写在 main.js 中, 这样会让 main.js 中的代码显得很臃肿. 为了方便后期对路由代码的管理和维护, 最好的方式就是把路由相关的代码单独封装到一个模块中, 这也是一种模块化开发的思想.

2> 如何封装?

1. 新建src/router/index.js, 然后把之前写在 main.js 中的路由代码全部转移到 router.js 中进行管理, 并导出 router 实例

注意: @代表 src下的绝对路径, 找到了 src, 就可以从它下面找到任何模块

2. 在main.js中导入router实例, 并注册

三、声明式导航和传参

1. 声明式导航

引入: 用户不可能需要记住我们的src地址然后进行输入, 才能实现跳转, 这样不合理, 因此引入了router-link来实现点击链接进行跳转.

1> 什么是声明式导航: 就是点击链接跳转页面

2> 如何实现: <router-link to="/path值">xxx</router-link>

3> router-link的本质: 就是 a 标签, to属性会变成href属性

4> 相比a标签, router-link 的优势: 自带激活/高亮类名, 很方便实现高亮样式

2. 俩个激活类名的区别

当导航链接处于激活时, vue-router会自动给当前的a标签添加俩个类名: router-link-active, router-link-exact-active, 这俩个类名有什么区别:

1> router-link-active: 模糊匹配, 当浏览器#后面放入url地址包含to属性值的时候, 则会给当前的 a 标签添加此类名

2> router-link-exact-active: 精确匹配, 当浏览器#后面的url地址等于to属性值的时候, 就会给当前的a 标签添加此类名

3> 相等是一种特殊的包含关系, 只要#后面的url地址等于to属性值, 此时既是相等关系,也是特殊的包含关系,则这俩个类名都会有

3. 声明式导航-传查参数

引入: 有这么一个场景, 我们在发现音乐页面要去朋友页, 并且携带id, 方便后续进行查询操作, 此时我们就需要把 id 作为参数进行传递--> 跳转路由进行传参

声明式导航传参:

1> 传参的类型: 查询参数传参, 动态路由传参

查询参数传参:

1) 如何传递:

1. 传字符串: <router-link to="/path?参数名1=值1&参数2=值2"></router-link>

2. 传对象: <router-link :to="{path:'/paht值',query:{参数名: 值}}"></router-link>

3. 即使给to传递的是对象, 最终还是会变成字符串的格式, 因此传递的方法是一样的

2) 接收参数:

import {useRoute) from 'vue-router' 导入函数

const route = useRoute() 创建对象

console.log(route.query.参数名) 打印对象

传字符串:

传递对象:

具体代码:

App.vue

<script setup>

</script>

<template>
    <!-- 提供的一个内置全局组件,是路由的出口 -->
    <!-- 相当于一个占位符, 输入路径对应的组件,就会把这个占位符替换成那个组件 -->
    <nav>
        <router-link to="/find">发现音乐</router-link>
        <router-link to="/my">我的音乐</router-link>
        <!-- 查询参; 传字符串 -->
        <!-- <router-link to="/friend?id=1008&name=小白">朋友</router-link> -->
        <!-- 查询参: 传对象, 这里虽然是对象的写法, 但是最后还是会被转化为字符串 -->
        <router-link 
        :to="{
            path:'/friend',
            query:{
                id: 1008,
                name: 小白
            }
        }"
        >朋友</router-link>
         
    </nav>
    <router-view />
</template>

<style scoped>
/* nav {
    display: flex; 
} */
nav a {
    /* display: flex; */
    color: #333;
    text-decoration: none;
}

/* 选中第二个 */
nav a:nth-child(2) {
    margin: 0 80px;
}
/* 激活的显示特殊样式 */
nav a.router-link-active {
    background: red;
    color: #fff;
}
</style>

Friend.vue

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.query)
</script>
<template>
    <div class="friend">
        <p>朋友的音乐</p>
        <p>朋友的音乐</p>
        <p>朋友的音乐...</p>
        <p>当前朋友的id = {{ route.query.id }}</p>
        <p>当前朋友的名字 = {{ route.query.name }}</p>
    </div>

</template>

<style scoped></style>

动态路由传参

语法: <router-link to ="/friend/10010"> 朋友 </roouter-link>

1> 先改写路由表的 path 值: /friend/:参数名 比如: path 值: /friend/:frd

2> 传参:

1. 传字符串: <router-link to ="/friend/100"> 朋友</router-link>

2. 传对象: <router-link :to:"{name:'friend',params:{fid:100}}"></router-link>

3. 即使传递的是对象格式, 最终也会变成字符串形式传参

3> 取值:

import {useRoute} from 'vue-route'

const route = useRoute()

console.log(route.params.fid)

传字符串

传对象

具体代码:

index.js

// 1. 下载包: npm i vue-router
// 2.导入 2 个相关函数
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入 3 个页面组件
import Friend from '@/views/Friend.vue'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
// 3. 创建路由实例
const router = createRouter({
	// 知名路由模式: 当前创建的是哈希模式, 路径后会带 #
	history: createWebHashHistory(),
	// 配置路由规则
	routes: [
		//一个规则就是一个对象,定义切换页面的路径
		{
			path:'/find',
			component: Find
		},
		{
			path:'/my',
			component: My
		},
		{	name: 'Friend',
			path:'/friend/:frd',
			component: Friend
		}
	]
})
//进行默认导出
export default router

App.vue

<script setup>

</script>

<template>
    <!-- 提供的一个内置全局组件,是路由的出口 -->
    <!-- 相当于一个占位符, 输入路径对应的组件,就会把这个占位符替换成那个组件 -->
    <nav>
        <router-link to="/find">发现音乐</router-link>
        <router-link to="/my">我的音乐</router-link>
        <!-- 动态路由传参: 字符串格式  -->
        <!-- <router-link to="/friend/1001">朋友</router-link> -->
         <!--动态路由传参: 传对象格式 -->
         <router-link 
         :to="{
            name:'Friend',  
            params:{
                frd:1223
            }  
         }">
         朋友</router-link>
         
    </nav>
    <!-- 路由的出口 -->
    <router-view />
</template>

<style scoped>
/* nav {
    display: flex; 
} */
nav a {
    /* display: flex; */
    color: #333;
    text-decoration: none;
}

/* 选中第二个 */
nav a:nth-child(2) {
    margin: 0 80px;
}
/* 激活的显示特殊样式 */
nav a.router-link-active {
    background: red;
    color: #fff;
}
</style>

Friend.vue

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route)
</script>
<template>
    <div class="friend">
        <p>朋友的音乐</p>
        <p>朋友的音乐</p>
        <p>朋友的音乐...</p>
        <p>当前朋友id={{ route.params.frd }}</p>
    </div>

</template>

<style scoped></style>

查询参 VS 动态参

声明式导航俩种传参方式的对比:

1. 查询参: 适用于传递多个参数

传: /path?参数名1=值1&参数名2=值2

取: route.query.参数名

2. 动态参: 需要改写路由规则表的path值, 比如 /path/:参数名1/参数名2 这种传参看起来比较好看

传: /path/具体值1/具体值2 传入的具体值会给参数名进行赋值

取: route.params.参数名

四、更多的配置

问题: 网页打开时, url默认路径是/, 没有匹配到组件的时候, 会出现空白, 此时我们就需要去想办法配置一下vue-router

vue-router的更多配置:

1. 重定向

当路由匹配了某个path, 强制跳转到另一个path

当前我们代码存在俩个问题:

1> 项目默认打开, 访问的时候, 出现空白页面

2> 控制台出现了黄色警告(没有匹配到路由表中 / 路径)

解决方法: 使用重定向, 在路由表的开头添加一个能够匹配/根路径的路由规则即可.

2. 404页面

需求: 输入错误的url, 路由规则无法命中页面, 此时我们就报错404

解决: 配置 404 规则

1) 创建404页面, 添加结构+样式+行为

2) 在路由表末尾, 添加一个 404 路由规则, {path: '/:pathMach(.*)*',component:_404}

生效规则: 如果路由能够正常命中则显示相应的页面, 否则才会匹配到404的规则, 显示 Not Found页面

创建404页面

在路由表末尾, 添加一个 404 路由规则

结果: 输入错误的url

3. 路由的模式

默认采用的是哈希模式, 特点是路径上会携带一个很丑的#, 为了去除这个#, 可以更路由模式, 改成 history 模式, 这样路径看起来就会更自然美观

注意: 在 Vite开发环境下, 我们可以正常使用历史模式进行切换路由; 但是当项目打包上线的时候, 要想使用历史模式, 那么需要服务器支持和配置. 也就是说, 在开发模式下, 直接使用历史模式即可

展示效果:

代码:

index.js

// 1. 下载包: npm i vue-router
// 2.导入 2 个相关函数
import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
// 导入 3 个页面组件
import Friend from '@/views/Friend.vue'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import _404 from '@/views/404.vue'
// 3. 创建路由实例
const router = createRouter({
	// 知名路由模式: 当前创建的是哈希模式, 路径后会带 #
	// history: createWebHashHistory(), //创建哈希模式
	history:  createWebHistory(),//创建历史模式
	// 配置路由规则
	routes: [
		//一个规则就是一个对象,定义切换页面的路径
		{//默认打开页面, 会访问 / 根路径, 这里借助了 redirect 让其强制跳转到 /find 发现音乐
			path:'/',
			redirect: '/find'    //强制跳转到/find
		},
		{
			path:'/find',
			component: Find
		},
		{
			path:'/my',
			component: My
		},
		{
			path:'/friend',
			component: Friend
		},
		{
			// 不能命中就显示404
			//配置404规则
			path: '/:pathMach(.*)*',
			component: _404
		}
	]
})
//进行默认导出
export default router

main.js


// 按需导入 createApp 函数
import { createApp } from 'vue'
// 导入 App.vue
import App from './App.vue'
// 默认导入: index.js可以省略,其他js不能省略
import router from './router'
// 创建应用
const app = createApp(App)
// 4. 注册路由实例: 让路由表规则生效
app.use(router)
// 指定渲染的位置
app.mount('#app')

404.vue

<script setup>
import router from '@/router';


</script>
<template>
    <div class="_404">
        <h4>Not Found</h4>
        <p>访问不到这个页面,请检查url</p>
        <RouterLink to="/">点击回到首页</RouterLink>
    </div>
</template>



<style scoped></style>

<!-- {path: '/pathMach(.*)*',component:_404}  -->

五、编程式导航和传参

引入: 之前的声明式导航需要我们手动点击后才会进行链接的跳转, 但是先在我们需要实现自动跳转,如: 登录成功后自动跳转到首页

1. 编程式导航介绍

1> 什么是编程式导航?

通过 js 代码进行主动跳转页面, 相对于之前的声明式导航是被动跳转的.

需求: 在发现音乐页, 挂载完毕后, 延迟2s, 自动跳转到朋友页

2> 语法:

1) 获取 router 路由实例

import{useRouter} from 'vue-router'

const router = useRouter() // router是路由实例, 也就是createRouter()的返回值

const route = useRoute()// route 是当前激活的路由对象, 用来获取路由参数的

获取路由对象

2) router.push(字符串/对象)

使用push把path传入作为默认自动跳转的路径

代码:

index.js

// 1. 下载包: npm i vue-router
// 2.导入 2 个相关函数
import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
// 导入 3 个页面组件
import Friend from '@/views/Friend.vue'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import _404 from '@/views/404.vue'
// 3. 创建路由实例
const router = createRouter({
	// 知名路由模式: 当前创建的是哈希模式, 路径后会带 #
	// history: createWebHashHistory(), //创建哈希模式
	history:  createWebHistory(),//创建历史模式
	// 配置路由规则
	routes: [
		//一个规则就是一个对象,定义切换页面的路径
		{//默认打开页面, 会访问 / 根路径, 这里借助了 redirect 让其强制跳转到 /find 发现音乐
			path:'/',
			redirect: '/find'    //强制跳转到/find
		},
		{
			path:'/find',
			component: Find
		},
		{
			path:'/my',
			component: My
		},
		{
			path:'/friend',
			name: 'Friend',
			component: Friend
		},
		{
			// 不能命中就显示404
			//配置404规则
			path: '/:pathMach(.*)*',
			component: _404
		}
	]
})
//进行默认导出
export default router

find.vue

<script setup>
// 需求: 在发现音乐页, 挂载完毕后, 延迟2s, 自动跳转到朋友页
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
// 获取路由实例
const router = useRouter()
//挂载完毕
onMounted(() => {
    // 延迟2s
    setTimeout(() => {
        // 字符串
        // router.push('/friend')
        // 传对象 path 属性
        // router.push({
        //     path: '/friend'
        // })
        //传对象 name 属性
        router.push({
            name:'Friend'
        })
    }, 2000)
})
</script>
<template>
    <div class="find">
        <p>发现音乐</p>
        <p>发现音乐</p>
        <p>发现音乐...</p>
    </div>
</template>

<style scoped></style>

2. 编程式导航传参

编程时导航传参和声明式导航传参是一样的

1> 复习声明式导航的传参:

<router-link to="字符串/对象"></router-link>

1)查询参:

/path?参数名=值 {path:'/path',query:{参数名:值}} 使用 route.query.参数名拿到参数

2)动态参:

{path:'/friend/:id,name:'Friend'} /friend/666 {name:'Friend',params:{id:666}}} 使用 route.query.参数名拿到参数

2> 编程式导航传参:

1) 查询参:

router.push('path?参数名=值') 字符串

router.push({path:'/path',query:{参数名:值}}) 对象

2) 动态参:

router.push('/path/具体值') 字符串

router.push({}name:'路由规则名称',params:{参数名:值}) 对象

查询参-字符串

查询参-对象

动态参-字符串

动态参-对象

代码:

index.js

// 1. 下载包: npm i vue-router
// 2.导入 2 个相关函数
import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
// 导入 3 个页面组件
import Friend from '@/views/Friend.vue'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import _404 from '@/views/404.vue'
// 3. 创建路由实例
const router = createRouter({
	// 知名路由模式: 当前创建的是哈希模式, 路径后会带 #
	// history: createWebHashHistory(), //创建哈希模式
	history:  createWebHistory(),//创建历史模式
	// 配置路由规则
	routes: [
		//一个规则就是一个对象,定义切换页面的路径
		{//默认打开页面, 会访问 / 根路径, 这里借助了 redirect 让其强制跳转到 /find 发现音乐
			path:'/',
			redirect: '/find'    //强制跳转到/find
		},
		{
			path:'/find',
			component: Find
		},
		{
			path:'/my',
			component: My
		},
		{
			path:'/friend/:id',
			// path:'/friend',
			name: 'Friend',
			component: Friend
		},
		{
			// 不能命中就显示404
			//配置404规则
			path: '/:pathMach(.*)*',
			component: _404
		}
	]
}) 
//进行默认导出
export default router

Find.vue

<script setup>
// 需求: 在发现音乐页, 挂载完毕后, 延迟2s, 自动跳转到朋友页
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
// 获取路由实例
const router = useRouter()
//挂载完毕
onMounted(() => {
    // 延迟2s
    setTimeout(() => {
        //查询参
        // 1) 字符串
        // router.push('/friend?id=666')
        // 2) 对象
        // router.push({
        //     path: '/friend',
        //     query: {
        //         id: 777
        //     }
        // })
        //
        //动态参:
        // 1) 字符串
        // router.push('/friend/888')
        // 2) 对象
        router.push({
            name: 'Friend',
            params: {
                id: 999
            }
        })

    }, 2000)
})
</script>
<template>
    <div class="find">
        <p>发现音乐</p>
        <p>发现音乐</p>
        <p>发现音乐...</p>
    </div>
</template>

<style scoped></style>

Friend.vue

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
</script>
<template>
    <div class="friend">
        <p>朋友的音乐</p>
        <p>朋友的音乐</p>
        <p>朋友的音乐...</p>
        <!-- 获取查询参数 -->
        <!-- <p>当前朋友的id={{ route.query.id }}</p> -->
         <!--获取动态路由参数 -->
        <p>当前朋友的id={{ route.params.id }}</p>
    </div>

</template>

<style scoped></style>

六、嵌套和守卫

1. 路由的嵌套

引入: 实现在一个路由页面, 进行另一套路由的切换, 比如: 网易云音乐的发现音乐页

路由嵌套: 一个路由页面, 还可以实现路由切换

1> 准备2级页面(创建 vue 页面, 填充结构+样式+行为), 并在路由规则表中进行配置2级路由规则(添加children 选项, 进行配置, 借助 redirect 防止空白页面出现)

2> 在相应的1级页面中给定2级路由出口 <router-view/>

实现点击跳转效果

实现默认重定向

具体代码:

index.js

// 1. 下载包: npm i vue-router
// 2.导入 2 个相关函数
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 导入 4 个一级路由组件页面
import Friend from '@/views/Friend.vue'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import _404 from '@/views/404.vue'
// 导入 3 个二级路由页面组件
import Recommend from '@/views/Recommend.vue'
import TopList from '@/views/TopList.vue'
import PlayList from '@/views/PlayList.vue'

// 3. 创建路由实例
const router = createRouter({
	// 知名路由模式: 当前创建的是哈希模式, 路径后会带 #
	// history: createWebHashHistory(), //创建哈希模式
	history: createWebHistory(),//创建历史模式
	// 配置路由规则
	routes: [
		//一个规则就是一个对象,定义切换页面的路径
		{//默认打开页面, 会访问 / 根路径, 这里借助了 redirect 让其强制跳转到 /find 发现音乐
			path: '/',			//第一次重定向
			redirect: '/find'    //强制跳转到/find
		},
		{//一级路由必须加/
			path: '/find',
			component: Find,
			redirect: '/find/recommend', //第二次重定向
			children: [
				// 在谁下面切换就在谁里面设置嵌套
				//配置路由嵌套
				// 二级路由开始, path 不加/,但是访问这个路径还是需要/
				{
					// 推荐
					path: 'recommend',
					component: Recommend
				},
				{	//排行榜
					path: 'topList',
					component: TopList
				},
				{	// 播放列表
					path: 'playList',
					component: PlayList
				}
			]
		},
		{
			path: '/my',
			component: My
		},
		{

			name: 'Friend',
			component: Friend
		},
		{
			// 不能命中就显示404
			//配置404规则
			path: '/:pathMach(.*)*',
			component: _404
		}
	]
})
//进行默认导出
export default router

PlayList.vue

<script setup>
        
</script>
<template>
<div class="PlayList">
    <p>播放列表</p>
    <p>播放列表</p>
    <p>播放列表...</p>
</div>
</template>


<style scoped>

</style>

Recommend.vue

<script setup>

</script>
<template>
    <div class="Recommend">
        <p>推荐页面</p>
        <p>推荐页面</p>
        <p>推荐页面...</p>
    </div>
</template>


<style scoped></style>

TopList.vue

<script setup>

</script>
<template>
    <div class="TopList">
        <p>排行榜</p>
        <p>排行榜</p>
        <p>排行榜...</p>
    </div>
</template>


<style scoped></style>

2. 路由的守卫

引入: 我们在没有登录的时候去访问其他页面是不被允许的, 因此我们需要一个进行权限判断的机制->路由守卫

路由守卫: 全称叫做全局前置守卫, 简而言之就是在每个页面访问之前对其做判断, 只有通过了才能放行, 否则将其打回去(和spring里面的拦截器一样)

语法:

router.beforeEach((to,from) => {

俩个参数含义:

// to: 要去的路由对象

// from: 当前的路由对象

三种情况:

// 如果放行, 返回 true 或者 undefined 或者不写

// 如果不放行, 返回 false

// 重定向到某个指定路由, return 路径

})

需求: 在登录的情况下, 是不可以访问我的音乐页的, 其他的正常访问.

具体代码:

index.js

// 1. 下载包: npm i vue-router
// 2.导入 2 个相关函数
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 导入 4 个一级路由组件页面
import Friend from '@/views/Friend.vue'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import _404 from '@/views/404.vue'
// 导入 3 个二级路由页面组件
import Recommend from '@/views/Recommend.vue'
import TopList from '@/views/TopList.vue'
import PlayList from '@/views/PlayList.vue'
// 模拟用户是否登录
const isLogin = false;
// 3. 创建路由实例
const router = createRouter({
	// 知名路由模式: 当前创建的是哈希模式, 路径后会带 #
	// history: createWebHashHistory(), //创建哈希模式
	history: createWebHistory(),//创建历史模式
	// 配置路由规则
	routes: [
		//一个规则就是一个对象,定义切换页面的路径
		{//默认打开页面, 会访问 / 根路径, 这里借助了 redirect 让其强制跳转到 /find 发现音乐
			path: '/',			//第一次重定向
			redirect: '/find'    //强制跳转到/find
		},
		{//一级路由必须加/
			path: '/find',
			component: Find,
			redirect: '/find/recommend', //第二次重定向
			children: [
				// 在谁下面切换就在谁里面设置嵌套
				//配置路由嵌套
				// 二级路由开始, path 不加/,但是访问这个路径还是需要/
				{
					// 推荐
					path: 'recommend',
					component: Recommend
				},
				{	//排行榜
					path: 'topList',
					component: TopList
				},
				{	// 播放列表
					path: 'playList',
					component: PlayList
				}
			]
		},
		{
			path: '/my',
			component: My
		},
		{

			name: 'Friend',
			component: Friend
		},
		{
			// 不能命中就显示404
			//配置404规则
			path: '/:pathMach(.*)*',
			component: _404
		}
	]
})
// 守卫路由
router.beforeEach((to, from) => {
	console.log(to)
	console.log(from)
	// return undefined/true; 放行
	// return false; //不放行, 页面会显示空白
	//  需求: 在登录的情况下, 是不可以访问我的音乐页的, 其他的正常访问.
	if(isLogin === false && to.path === '/my'){
		//没有登录, 不能放行
		alert('请先登录')
		return false;
	}else{
		//其他情况, 一律放行
		return true;
	}
})
//进行默认导出
export default router