VueRouter笔记
基于代码方式实现跳转(编程式跳转)
- 路由跳转三种写法
1.<router-link to='/home'>
2.<router-link :to='{path:'/home'}'>
3.<router-link :to='{name:'home'}'>
<button @click='goto'>
1.goto(){this.$router.push('/vfor')}
1. push改为replace,没有历史记录,回退不起作用
1. push跳转,replace替换,go(-1)回退this.$router
获取当前项目中的路由管理器(VueRouter对象),该路由管理器对象包含了已经配置好的所有的路由器对象,每一个路由对象中包含:Path,name,component属性,还提供一些方法用于操作路由跳转$router
提供了路由管理器所拥有的的属性和方法,页面跳转等功能,$route
封装当前路由的属性:name,path,component,query,params等属性
路由跳转中的参数传递问题
- 传递参数
1. 查询字符串
1. 使用?
在路径后进行查询字符串拼接
1.<router-link to='/detail?id=123'>
或this.$router.push('/detail?id=123')
2. 路径
1. 将参数藏在请求资源路径后进行参数传递
1. 配置路由path:'/home/:id'
1.<router-link to='/detail/123'>
或this.$router.push('/detail/123')
- 接收参数
1. 查询字符串
1.let id=this.$route.query.id
1. this. r o u t e 可以获取当前组件所对应的路由对象 ( 相当于 i n d e x . j s 中定义的一段配置 : p a t h , n a m e , c o m p o n e n t 等 ) 2. 路径 1. ‘ route可以获取当前组件所对应的路由对象(相当于index.js中定义的一段配置:{path,name,component等}) 2. 路径 1. ` route可以获取当前组件所对应的路由对象(相当于index.js中定义的一段配置:path,name,component等)2.路径1.‘route.params.id`
1. index.js中path配置/detail/:id用于匹配请求路径,把最后斜杠后的字符串当做路径参数赋值给id,在detail.vue可以获取该id参数
路由的嵌套
{ path:'/components', name:'components', component:()=>import('../views/Components.vue'), children:[ { path:'form', component:()=>import('../views/Form.vue') } ] }
路由的重定向
{ path:'/components', redirect:'/components/table' }
当访问
/components
时,会自动定位到/components/table
在路由上绑定信息
{ path:'/components', name:'components', component:()=>import('../views/Components.vue'), meta:{ crumb:['电影管理','电影列表','修改电影'] } }
meta是自定义的
使用信息使用
$route.meta.crumb
全局路由守卫
- 路由守卫在路由跳转的时候执行,进行判断,不符合条件的,强制跳转到登录页面,符合才能准确跳转目标路由