目录
hash模式
window.location
代码实现
history模式
window.history
代码实现
路由守卫事件
路由生命周期执行的先后顺序
路由与组件声明周期的先后顺序
router-link 与 a
$route.matched
问题
不同路由跳转到相同页面,缓存问题
vue-Router实现了在不刷新页面的情况下,通过改变路由的URL去改变页面的视图
对hashchange事件进行监听,当hash值发生变化时,渲染该hash值下对应的组件
Document
Home
页面A
点击Home,效果如下
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes //array
})
length
历史记录个数,history.back()操作不会减少记录个数
state
可认为是该页面的接收参数,根据pushState()方法可向具体URL传参state
pushState(state, title, url)
replaceState(state, title, url)
替换当前历史记录
back():操作浏览器后退
forward():操作浏览器前进
go():操作浏览器跳往第几个栈记录
history模式就是利用pushState()改变历史记录,t同时进行对应路由组件的渲染,监听popstate事件实现浏览器路由跳转时,渲染不同的组件内容
home页
点我
刷新进入页面A
从'/a'进入’/b'
从'/a'进入’/a?name=aa'
进入A页面:执行顺序,路由的声明周期 > 组件的生命周期
离开A页面(从 '/a' 到 '/' ):执行顺序,路由的声明周期 > 组件的生命周期
是一个数组,匹配当前的路由一级路由的祖父级
const routes = [
{
path: '/a',
name: 'a',
component: () => import("@/views/A.vue"),
children: [
{
path: 'c',
name: 'c',
component: () => import("@/views/child/C.vue"),
}
]
},
]
访问'/a/c'时,matched如下
现象:后台管理界面,存在二级路由,从'/home/a' 切换到 '/home/b' ,但当前这两个路由对应的是同一个页面组件,此时会出现缓存现象,第二次访问不会进行mounted之前周期的渲染。
//router.js
const routes = [
{
path: '/home',
name: 'home',
component: Home,
meta: { static: true },
// /a , /b 对印着同一个页面
children: [
{ path: 'a', componentPath: 'views/child/A.vue' },
{ path: 'b', componentPath: 'views/child/A.vue' }]
},
]
解决方法:
1.在home的route-view标签中设置key,是vue-router认为这是两个不同的路由
点击跳转B
点击跳转A