D - Vue-Router - 持续补充 - 笔记

提前

官方文档

https://router.vuejs.org/zh/

唯一不好的是,没有一个在线例子可以打开,可能是我网的原因

首先 笔记 不适合初始学习,初始学习建议看官方文档 , 笔记可以帮助我忘记后快速回忆

安装Router插件

直接引用

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

webpack
一般生成项目时,会出现是否安装vue-router插件,下面是生成命令

vue init webpack 项目名

如果当时没有选上,可以下载后使用,下面是下载命令

npm install vue-router

生成后大概就像这样

方便阅读

由于分级标题不够明显,体现不出分类感,我会在标题后面加上~,~一级标题,~~二级标题,…
~
~ ~ 下级内容是上级内容分出来的,也就是它和上级内容有描述联系
~ ~ 但是和同级没有描述联系,需要关联会特别表明出来

感觉到就行了,感觉不到也不用太在意

开端 ~

组件 ~ ~

router-link ~ ~ ~

我不喜欢用<router-link>,所以我不会在例子中使用它,也不会过多描述

触发<router-link>时会在内部调用push方法

router-view ~ ~ ~

渲染路径匹配到的视图组件

name : String - 默认值: default

如果 <router-view>设置了name，则会渲染对应的路由配置中 components 下的相应组件

Router ~ ~

Router : Object
下面是它的选项

routes选项 ~ ~ ~

routes : Array<RouteConfig>

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高

RouteConfig 的类型定义 ~ ~ ~ ~

RouteConfig : Object
下面是它的选项
path : String

访问路径

component : 组件

访问路径反馈的组件
等价于 components:{ default : 组件 } ,而且 components的优先级比component高

name : String

命名路由

components : { [name: string]: 组件 }

命名视图组件

redirect : String | Location | Function

重定向

props : Boolean | Object | Function

道具

alias : String | Array<String>

别名

children : Array<RouteConfig>

嵌套路由(子路由)

beforeEnter : (to: Route, from: Route, next: Function) => void

钩子:进入前

meta : any

待补充

caseSensitive : Boolean

匹配规则是否大小写敏感？(默认值：false)

pathToRegexpOptions : Object

待补充

Router 实例方法 ~ ~

$router.方法,我会忽略掉前缀

导航 ~ ~ ~

push

这个方法 可以导航到不同的 URL , 会向 history(历史) 栈添加一个新的记录

第一个参数 路径
String : 绝对路径
`` : 也可以说是String吧,使用这个``套起来,就可以使用${ 变量 }路径参数
Object:

{name:’ ’ , params: { 路径参数: 变量 } } //导航到对应的命名路由,并且设置 路径参数(动态路由参数)
 提前是 路径参数 必须与 对应路径的 路径参数 相同
 比如:/:a ,那么必须是a,params:{ a:变量 },否则导航失败
{ path:’ /b ’ , query: { a: ’ ’ }} -> /b?a=' ' //带个参数
注意：如果提供了 path，params 会被忽略,这样使用即可

{ path: /user/${ 变量 } }

建议直接``套着写,方便,当然这是不多的情况,如果多了,还是建议使用Object
/a${ $route.path }?a=${ 变量 },方便吧

第二个参数钩子

回调钩子将会在导航成功完成 (在所有的异步钩子被解析之后)
可以看到,上面的图片是then,按道理是可以使用链式的,不过意义不大,反而提高了复杂度

第三个参数钩子

终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用
可以看到,上面的图片最后是catch,也就是异常的意思

replace

这个方法除了 不会向 history(历史) 栈添加一个新的记录
其他和push一样

go

这个方法的参数是一个整数，意思是在 history(历史) 记录中向前或者后退多少步
go( 3 ) 向前3步
go( -3 ) 后退3步
go(-100) 后退100步,若没有则失败,而非到极限

back

等同于 go( -1 )

forward

等同于 go( 1 )

路由对象$route ~ ~

一个 路由对象 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 路由记录
路由对象 是 不可变 的，每次成功的导航后都会产生一个新的对象。
路由对象 出现在多个地方:
  在组件内，即 this.$route
  在$route 观察者(监听器)回调内
  router.match( 访问路径 ) 的返回值

$route.path : String

对应当前路由的路径，总是解析为绝对路径

$route.params : Object

一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象

$route.query : Object

一个 key/value 对象，表示 URL 查询参数。例如，对于路径/foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象

$route.hash : String

当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串

$route.fullPath : String

完成解析后的 URL，包含查询参数和 hash 的完整路径

$route.matched : Array<RouteRecord>

一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)

$route.name : String

当前路由的名称，如果有的话

$route.redirectedFrom : String

如果存在重定向，即为重定向来源的路由的名字

具体使用 ~

动态路由匹配 ~ ~

动态路由 和 动态绑定v-bind的缩写一样,都是使用:
使用方式:路径:/a/:b/c ,此时b是动态的,可以接受任何字符,并且会被加入$route.params中,通过$route.params.b访问动态参数
例子:

--路由配置--
path:'/a/:b/c' ,
component:组件a
--组件a模板--
  <h1>{{$route.params.b}}</h1>
--访问--
/a/5	访问不到
/a/5/c	访问成功,对应的  $route.params.b == 5

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中

路径	访问	$route.params
/a/:b/:c	/a/1/2	{ b: ‘1’ , c: ‘2’ }

通配符 * ,代表 任意字符 任意长度
例如:

path:'/a/*/c'
可以通过/a/5/c访问
也可以通过/a//c访问,当然/a/c是不行的

嵌套路由(子路由) ~ ~

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

在根模板中声明的 <router-view />是顶级路由 (取个暂时性的专业术语(非官方))
组件中的 <router-view />是多级路由
所有<router-view />渲染什么组件,都是根据路由如何配置决定
例如:

假设所有组件都存在<router-view /> ,在这里我把他缩写成 R
根模板( R )
路由配置是: 顶级路由( 子路由( 子路由( ) ) )
当访问顶级时,模板就变为 根模板( 组件( R ) )
依次下推…

说白话就是把当前路由的组件 渲染到 上级路由组件中,提前是上级组件存在<router-view />

例子:

--根组件模板--
<router-view/>
--A组件模板--
<h1>A</h1>
<router-view/>
--A-A组件模板--
<h1>A-A</h1>
<router-view/>
--A-B组件模板--
<h1>A-B</h1>
<router-view/>

–路由配置–

分别访问 /a , /a/b , /a/b/c , /c

你如果希望访问/a时,a组件的<router-view />被渲染,可以设置一个path: ''的子路由

命名路由 ~ ~

通过在路由配置时加入name即可

$router.push( { name:‘路由name’ } ) //这样即可导航到对应name的路由路径

命名视图 ~ ~

如果你看了前面的描述,你应该知道<router-view>有个name道具 和 routes选项中的components
没错!他们俩是配合使用的,如果没有看前面的描述,建议看一下
简单描述一下

name的值 对应 components的key(键值) ,components的值是渲染的组件
如果多个name相同,并不会有影响,会很平常的渲染多个

重定向和别名 ~ ~

重定向和别名 分别通过routes选项中的redirect和alias

而且重定向的值是支持:string | Location | Function
看到Location(路径)没有,这个在 | Router实例方法->导航->push方法中有描述
也就是在重定向时可以改变全部的URL

重定向:当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
别名:/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a

路由组件传参 ~ ~

您是否 焦躁不安 , 感觉 敲代码使不上劲 ,您是否 浑身无力 , 感觉 开个机都费劲 , 它来了 , 肾…routes选项中的props,它是 组件与路由的解耦小助手

你想想在组件中访问路由是不是得$route.params.id这样!如果组件需要在其他地方复用,那就会报错!报错!报错!
下面提供了3种使用方法,根据需要使用,不过我建议统一用函数模式,因为它是功能最全的,可以少记2个
布尔模式

如果 props 被设置为 true，$route.params 将会被设置为组件属性,也就是作为props(道具)传入,当然提前是组件得把props(道具)声明出来

对象模式
对象的值是静态的,在程序启动时自动装载了, 不灵活

函数模式
在每次访问 该路径时 运行一次函数,并把返回值作为props(道具)传入组件
函数第一个参数是 $route

持续更新中…

目前学的已经够我写小项目了,等我写个人站的时候在更新