大白话攻破VueRouter重点知识
https://router.vuejs.org/zh/ vue router 官方文档
wx：前端周计划
官方文档里讲了很多很细，但是很多并不便于理解。这里把vue router 分为几个重点来总体概述一下。通过简单的语言来理解文档中所描述的概念。
动态路由的分配
其下有三个重要的点，分别是 动态路径参数，通配符和匹配优先级
动态路径参数
id即是一个动态路径参数
path:'/user/:id'
场景可以想象为 ：
不同用户进入同一个页面，携带的用户id不同
而且这个参数 会存储在$route.params里面
通配符
符合某些条件的路由匹配
path:'*'path:'user-*'匹配开头为 user-的路由要声明的是通配符的路由应该放在最后
匹配优先级
匹配优先级则是 路由定义的越早 优先级越高
嵌套路由
chidren属性中设置嵌套路由
命名路由
name属性是命名路由的核心，即给路由设置上姓名
则 某些操作可以直接进行路由定位
比如
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>或者router.push({ name: 'user', params: { userId: 123 } })
这两种方式都会按照name 去导航路由的路径
命名视图
只有在一个页面下有多个视口的情况下才需要命名视图来区分。
<router-view ></router-view><router-view name="a"></router-view><router-view name="b"></router-view>const router= new VueRouter({routes:[{path:'/',components:{ //此处需要用复数default:Default,a:Amodel,b:Bmodel}
而一个视口需要对应一个组件 所以在路由定义处需要有多个components来对应。
重定向和别名
redirect:'/b'当访问某路径时会将其重新跳转到balias:'/b'别名的原理则是a的别名是b则 访问b时等同于路由a但是路径仍然显示b
路由组件的传参
第一种$route的方式
常规方式是利用之前所说的动态路径参数进行传参
缺点是 增大组件与路由的耦合性
也就是说在不带特定参数的路径下则无法正常渲染组件
const User={template:'<div>User{ { $router.params.id }}</div>'}const router =new VueRouter({routes:[{ path:'/user/:id',component:User}]})
第二种props的方式
优势在于解耦且可以传输复杂数据 props的true or false 代表了 是否接收键值
const User ={props：['id'],template:'<div>User{ {id}}</div>'}const router =new VueRouter({router:[{ path:'/user/:id',component:User,props:true},包含命名视图的路由必须分别为每个命名视图增加props选项{path:'/user/:id',components:{ default:User,b:bUser},props:{ default:true,sidebar:false}}]})
需要特别说一下函数模式的props
传参方式为 /search?q=vue
则匹配到 search对应的路由下 query为最新的键名
而route.query.q将被设置为键值
所以传参的形式 将是 { query :‘vue’ }
const router =new VueRouter({routes:[{path:'/search',component:SearchUser,props:route=>({ query : route.query.q })}]})
川长思鸟来
傷城~
刺骨的言语ヽ痛彻心扉
怼烎@
港控/mmm°
还没有评论，来说两句吧...