个人名片:
😊作者简介:一名大二在校生
🤡 个人主页:坠入暮云间x
🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡
文章目录
一、什么是路由?
路由是一种映射关系
vue中的路由是路径和组件的映射关系
通过路由就可以知道把不同的路径,应该匹配渲染那个组件
生活中的路由:设备和ip的映射关系
官网
VueRouter安装(5+2)
作用:修改地址栏路径时,切换显示匹配的组件
1.下载VueRouter3.6.5版本
yarn add vue-router@3.6.5
2.引入
import VueRouter from 'vue-router'
3.安装注册
Vue.use(VueRouter)
4.创建路由对象
const router=new VueRouter()
5.注入,将路由对象注入到new Vue实例中,建立关联
new Vue({
render:h=>h(App),
router
}).$mount('#app')
6.核心步骤
1.创建需要的组件(views目录)配置路由规则
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化
const router = new VueRouter({
// routes 路由规则们
// route 一条路由规则 { path: 路径, component: 组件 }
routes: [
{ path: '/find', component: Find },
{ path: '/my', component: My },
{ path: '/friend', component: Friend },
]
})
2.配置导航,配置路由出口
在上面的示例中,
<router-link>
用于跳转到指定路由,<router-view>
用于显示对应路由的组件。
路由组件的分类
在vue中我们常将vue文件分为两类
- 页面组件(配置路由规则时需要使用的组件
- 复用组件(可以重复使用的组件)
将vue文件分开目的是为了更方便维护代码,方便后续修改和完善
二、声明式/编程式导航
1.导航链接
vue-router 提供了一个全局组件 router-link (取代 a 标签)
- 能跳转,配置 to 属性指定路径(必须) 。本质还是 a 标签 ,to 无需 #
- 能高亮,默认就会提供高亮类名,可以直接设置高亮样式
语法: <router-link to="path的值">
发现音乐</router-link>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</div>
<div class="top">
<!-- 路由出口 → 匹配的组件所展示的位置 -->
<router-view></router-view>
</div>
</div>
使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active
和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
1.router-link-active(模糊匹配)
to=“/my” 可以匹配 /my /my/a /my/b …
只要是以/my开头的路径 都可以和 to="/my"匹配到
2.router-link-exact-active(精确匹配)
to=“/my” 仅可以匹配 /my
如何查询参数传参?
在vue中传参一般有两种方式
- 查询参数传参
- 动态路由传参
编程式导航,如何跳转传参?
1.path路径跳转
-
query传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2') this.$router.push({ path: '/路径', query: { 参数名1: '参数值1', 参数名2: '参数值2' } })
-
动态路由传参
this.$router.push('/路径/参数值') this.$router.push({ path: '/路径/参数值' })
2.name命名路由跳转
-
query传参
this.$router.push({ name: '路由名字', query: { 参数名1: '参数值1', 参数名2: '参数值2' } })
-
动态路由传参 (需要配动态路由)
this.$router.push({ name: '路由名字', params: { 参数名: '参数值', } })
三、动态路由传参
1.配置路由传参
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})
2.配置导航链接to="/path/
参数值"
3.对应页面组件接受参数
$route.params.参数名
params后面的参数名要和动态路由配置的参数保持一致
查询参数传参 VS 动态路由传参
-
查询参数传参 (比较适合传多个参数)
- 跳转:to=“/path?参数名=值&参数名2=值”
- 获取:$route.query.参数名
-
动态路由传参 (优雅简洁,传单个参数比较方便)
- 配置动态路由:path: “/path/:参数名”
- 跳转:to=“/path/参数值”
- 获取:$route.params.参数名
注意:动态路由也可以传多个参数,但一般只传一个
总结
Vue.js 提供了 Vue Router 来进行前端路由的管理,使得单页面应用(SPA)能够实现页面之间的切换和导航。以下是关于 Vue Router 的一些总结:
-
基本路由配置:Vue Router 通过创建路由对象,将不同的路径映射到不同的组件上,实现页面的跳转。可以配置路由规则,也可以通过动态路由和嵌套路由来管理复杂的页面结构。
-
路由导航:Vue Router 提供了多种导航方式,如通过 router-link 组件、编程式导航(this. r o u t e r . p u s h 、 t h i s . router.push、this. router.push、this.router.replace)等方式实现页面跳转,并且可以设置路由的参数和查询参数。
-
路由传参:Vue Router 允许通过路由参数和查询参数来传递数据,组件可以通过 this. r o u t e . p a r a m s 和 t h i s . route.params 和 this. route.params和this.route.query 来获取传递的参数,实现页面间数据的传递。
-
导航守卫:Vue Router 提供了一些导航守卫的钩子函数,如 beforeRouteEnter、beforeRouteLeave 等,可以在路由跳转前后执行一些操作,如验证登录状态、权限管理等。
-
路由懒加载:为了优化应用性能,Vue Router 支持路由懒加载,可以按需加载路由对应的组件,减少首次加载时的资源占用和提高页面加载速度。
-
路由模式:Vue Router 支持多种路由模式,包括 hash 模式和 history 模式,默认使用的是 hash 模式,可以通过配置来选择不同的模式。
总的来说,Vue Router 提供了丰富的功能和灵活的配置方式,能够帮助开发者实现前端路由管理,构建复杂的单页面应用。熟练使用 Vue Router,可以提高开发效率,同时也能够更好地实现页面间的交互和导航控制。