vue - router
路由传参
https://www.jianshu.com/p/4c5c99abb864https://segmentfault.com/a/1190000009651628
this.$router.push({
name: 'rateApprove',
params: {
flowCode:'RateApproval',
row: input
}
});
this.$router.push({
path: "/bookingmanagement/unWaybillTransfer"
});
this.$router.go(-1) //跳转到上一次浏览的页面
$route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。
$router 是“路由实例”对象,即使用 new VueRouter创建的实例,包括了路由的跳转方法,钩子函数等。
动态加载理由
addRoutes()
路由缓存
在router-view外包裹keep-alive
例:
<keep-alive>
<router-view></router-view>
</keep-alive>
使用 meta
在路由中添加下面属性
meta: {keepAlive: true // 缓存}
meta: {keepAlive:false // 不缓存 }
例:
{
path:'/Distribution',
name:'Distribution',
component: Distribution,
meta: {keepAlive: true // 缓存}
}
vue-router hash 模式和 history 模式是如何实现的?
hash 模式:
# 后⾯ hash 值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新⻚
⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化,然后根据 hash 变化来实现
更新⻚⾯部分内容的操作。
( window.addEventListener('hashchange',fn) )
history 模式:
history 模式的实现,主要是 HTML5 标准发布的两个 API, pushState 和 replaceState ,这
两个 API 可以在改变 url,但是不会发送请求。这样就可以监听 url 变化来实现更新⻚⾯部分内容
的操作。
( window.addEventListener('popstate', fn) )