23、vue-router基础概括
2022-04-01 12:46:58 0 举报
AI智能生成
vue
作者其他创作
大纲/内容
下载
官网
https://router.vuejs.org/zh/
$ npm i vue-router / $ yarn add vue-router
路由使用
导入路由
在 main.js 主入口中
this.$router
提供一系列操作路由的方法
this.$route
提供一系列路由的属性
配置项
mode
路由的方式:HASH(哈希路由) && HISTORY(BROWSER路由)
HASH路由
在URL地址末尾加入 #/
哈希值/
例如
#/userlist
哈希值/userlist
#/useradd
哈希值/useradd
原理
vue-router 监听当前页面HASH值的改变,根据不容的HASH值,在“路由视图容器”中渲染不同的组件
路由容器
router-view 路由容器
根据路由表的匹配规则,匹配到不同的组件,每一次都可以把匹配到的组件放置在容器中进行渲染
routes
配置路由表:在不同的HASH值下匹配不同的组件
语法
routes:[{key:val,...},{...}...]
例
需要把用到的组件先导入
路由懒加载则不用
path: '/'
路由路径
(后期跳转和匹配的时候需要)
例如:<router-link to='/'> 或者 :to='{path:'/'}'
path: '*'
* 代表所有路径
name:'xxx'
命名路由
(后期可基于 <router-link :to='{name:'xxx'}'> 跳转)
component: Home
渲染的组件
redirect: '/'
路径重定向为“/”
children : [{...}]
子路由
每一次URL地址后面的HASH值改变,程序就监听到了,程序会重新从路由表中第一个开始向下依次进行匹配,直到找到符合的那一项为止
命名视图
路由懒加载
在路由表中首先要导入需要用到的全部组件,在路由表处理的时候 首先会把这些组件全部编译处理,然后在向下逐一执行代码,如果组件过多就会大大影响性能
使用
作用
出于性能优化考虑,利用路由懒加载,实现按需加载
不需要在开始导入全部组件,在路由表中使用组件的时候,在导入
路由跳转
实现路由跳转,有两大方案:
1. router-link
<router-link> 最后渲染出来的是a标签
跳转方式
to 地址
to='[path]'
<router-link to='/'>
:to="{[path]/[name],传参}"
这种方式不仅能够实现跳转,还可以传递参数
path
基于query显示传参
基于query显示传参(传递的参数信息会以问号的方式显示在URL地址中)
1. path或者name实现路由跳转都可以基于这个方式处理
2. 基于$route.query可以获取这个值,而且不论是点击传递还是页面再刷新,
只要地址栏中有问号参数,query中就可以获取到这个值
只要地址栏中有问号参数,query中就可以获取到这个值
name
基于params 隐形传惨
基于params传参是隐性传参(传递的信息不会在地址栏中体现)
1.只有基于命名路由跳转才可以使用params传参
2.进入到路由后,可以基于$route.params获取传递参数信息
3.页面一旦刷新,则传递的参数信息就没有了
动态路由
动态路由(需要在路由表中设置好)
只通过 path 方式实现
第一步:在路由表中设置 path: '/active/:id/:name', 这种格式的 path 完成提前占位
第二步:在 router-link 中传入参数即可
可根据参数不同跳转相同组件的不同操作
问题
点击多个按钮跳转到同一个路由,路由管控的组件并不会从头开始重新渲染(也就是created/mounted等周期函数只执行一次)
触发的只是更新
解决
1、先切换到其它路由组件,路由中会默认把上一次渲染的组件销毁;
当后期重新切换回来的时候,触发当前组件的从头开始重新渲染;
但是两次连着要渲染一个组件,那么组件不会被销毁
2、watch 监听路由改变
2. 基于JS中的 this.$router下的方法实现路由跳转
编程式导航
定义
通过JS实现路由的跳转和传参
相当于把 router-link 中的规则转移到JS中,利用JS实现
实现跳转的方式
push
类似于 <router-link to="">
用法基本相同
go
路由池
每一次的路由跳转都会记录在路由池中
go(-1):在路由池中找到上一次的路由地址,并跳转到这个地址
go(1):在路由池中找到下一次的路由地址,并跳转
back
与 go(-1) 效果相同
例
子路由
子路由的值是一个数组
每一项都是一个对象,对象中包含内容与routes中一致
0 条评论
下一页