一、概述
路由定义:路径和组件的映射关系;
路由作用:修改地址栏路径时,切换显示匹配的组件;
二、使用(5+2)
5个基础步骤
当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由变成了 /#/
的形式。表示项目的路由已经被Vue-Router管理了
两个核心步骤
1.创建好所需要的组件(views目录下),配置路由规则
值得注意的是:如果path路径设置为:path:'/'
,则这个就是你启动项目时所一开始显示的画面,但我们一般会直接将其重定向为redirect: '/home'
,让其一开始就显示首页。
上面的路由规则的意思就是:当我访问该路径时,会跳转到该页面,就是说我不用配置下面路由出口也能完成该功能,但是路由出口的作用是什么呢,我觉得更多是在当前的组件中,我们需要动态在这个页面中渲染一些子页面(子组件),这时候我们就可以根据路由出口,将这些页面动态渲染到当前页面中,与下面的配置导航不一定是一个连续的操作,看你的需求是什么。
2.配置导航,配置路由出口
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<router-view></router-view>
</div>
三、导航
简单的理解:根据需求跳转到对应的页面,而这里的导航更多的是一种动态的跳转,比如我点击某个地方,跳转到哪里,需要传递什么参数等等,需要我们自己去设置。
vue中的导航又分为声明式导航和编程式导航,它们的主要区别定义方式的不同,声明式导航主要是使用模板组件中定义,而编程式导航是使用JavaScript代码定义的
特点 | 声明式导航 | 编程式导航 |
---|---|---|
定义方式 | 使用模板组件(如 <router-link> ) | 使用 JavaScript 代码 |
使用场景 | 适合静态链接、简单导航 | 适合动态条件下的导航 |
可读性 | 更直观,符合 HTML 语义 | 依赖代码逻辑,可能较复杂 |
灵活性 | 固定的链接,灵活性较低 | 高度灵活,可根据状态变化导航 |
声明式导航
声明式导航,主要的方式是通过模板种的组件(如<router-link>
)来进行路由导航。比较简单,这里不细讲,主要讲讲它的传参方式。
查询参数传参
-
如何传参?
<router-link to="/path?参数名=值"></router-link>
-
如何接收当前页面的查询参数
固定用法:$router.query.参数名
动态路由传参
-
配置动态路由
动态路由后面的参数可以随便起名,但要有语义
const router = new VueRouter({ routes:[ ...., { path: '/search/:words', component:Search } ] })
-
配置导航链接
to="/path/参数值"
-
对应的页面组件接受参数
$route.params.参数名
params后面的参数名要和动态路由配置的参数保持一致
编程式导航
编程式导航允许我们在JavaScript中控制路由的跳转,而不是依赖于模板中的<router-link>
,它的跳转方式又分为两种
- path 路径跳转 (简易方便)
- name 命名路由跳转 (适合 path 路径长的场景)
(一)path路径跳转
1.语法
特点:简单方便
//简单写法
this.$router.push('路由路径')
//完整写法
this.$router.push({
path: '路由路径'
})
2.传参
-
query传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2') this.$router.push({ path: '/路径', query: { 参数名1: '参数值1', 参数名2: '参数值2' } })
-
动态路由传参
this.$router.push('/路径/参数值') this.$router.push({ path: '/路径/参数值' })
(二)name 命名路由跳转
特点:适合 path 路径长的场景
1.语法:
-
路由规则,必须配置name配置项
{ name: '路由名', path: '/path/xxx', component: XXX },
-
通过name来进行跳转
this.$router.push({ name: '路由名' })
2.传参
-
query传参
this.$router.push({ name: '路由名字', query: { 参数名1: '参数值1', 参数名2: '参数值2' } })
-
动态路由传参 (需要配动态路由)
this.$router.push({ name: '路由名字', params: { 参数名: '参数值', } })
(三)编程式导航中其他导航方法
1.this.$router.replace()
this.$router.replace()
是Vue Router提供的一个方法,用于在路由中进行替换导航。与 this.$router.push()
不同,replace
方法不会在历史记录中留下当前路由的记录,这意味着用户无法使用浏览器的“后退”按钮返回到之前的路由。
语法
this.$router.replace(location, onComplete?, onAbort?)
location
:目标路由的路径或路由对象。onComplete
(可选):导航完成后的回调。onAbort
(可选):导航中止后的回调。
应用场景
(1) 登录后,防止用户点击返回又回到登录页面
this.$router.replace({ // 使用replace,返回时能够直接返回商品页,而不是刚刚的登录页
path: '/login',
query: {
backUrl: this.$route.fullPath
})
(2) 表单提交,防止用户提交表单后点击返回又回到表单页面
submitForm() {
// 表单处理逻辑
this.$router.replace('/success'); // 提交后跳转
}
2.this.$router.go()
用于在路由历史记录中向前或向后导航。它的参数可以是一个整数,表示要移动的步数。
语法
this.$router.go(n)
n
:一个整数,正数表示向前导航,负数表示向后导航。例如,-1
将返回上一个页面,1
则会前进一个页面(如果有的话)。
应用场景
- 用户界面控制: 在应用中提供“返回”和“前进”按钮,允许用户方便地导航历史。
- 特定条件下的导航: 在特定逻辑下,比如表单未填写时,禁止用户前进,但允许他们返回。
- 复杂的导航需求: 当使用多个页面和状态时,可以通过历史记录控制用户的导航体验。