一 . 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
当这样执行后,该组件就会被重新渲染,不会被缓存.