vue-router笔记

一 . Vue-router参数的传递

params和query

1. 　　params传递参数时只能传一个

　　　　路由格式:/user/:name

　　　　传递方式:path:/user/:name

　　　　传递后形成的路径:/user/zhangsan  (假设name:zhangsan)

params接收参数

 

 

2.　　query传递参数可以传多个

　　　　路由格式:/profile

　　　　传递方式:对象中使用query {key:value,key2:value2}

　　　　传递后形成的路径:profile?name=junlebao&age=17&height=1.88

如果有大量数据需要传递的话,建议使用query

query接收参数

 

 二. 用button按钮来实现跳转和传参

 

 

 

注意: 用$router.replace对数据进行绑定,同样也可以用push等方法,用replace时,页面没有history记录

用push方法会有history记录.

三 .   beforeEach之导航守卫

导航钩子函数介绍:

to:即将进入的页面对象

from:导航即将要离开时候的对象

next:使用钩子时,必须调用此方法,才能调到下一个钩子

 

 这个是利用beforeEach动态改变页面的title,通过routers添加一个meta:{title:"首页"}来绑定页面的title

导航钩子(hook)分类:

 

全局守卫,路由独享守卫,组件内守卫

全局守卫:

beforeEach:前置钩子(to,from,next){}

afterEach:后置钩子(to,from,next){}

 

路由独享守卫

beforeEnter:进入路由之前调用,在路由配置routers中直接定义和全局守卫参数一样

 

组件内守卫:

beforeRouterEnter

beforeRouterUpdate

beforeRouterLeave

 

 四.  keep-alive组件

 keep-alive是Vue内置的一个组件,可以使包含的组件保留缓存的状态,或避免重新渲染

include:包含在内的会被缓存

exclude:包含在内的会被重新渲染

router-view也是一个组件,如果直接被包含在keep-alive里面,所有路径匹配到的组件都会被缓存

 

 

 

 上面exclude中的字符串是被组件导出的name

当这样执行后,该组件就会被重新渲染,不会被缓存.