一般来说,浏览器的前进后退会让整个页面进入重新加载页面资源到回流重绘的过程,
但由于vue、react这类的框架是单页应用,所以在点击浏览器的前进后退按钮或触发浏览器此类事件时,都会刷新整个应用。
所以在vue中有vue-router来管理应用的路由,这使得vue可以做到和传统应用一样的路由跳转。
在vue-router中常用的内置组件有
- router-view 模板内容,用作路由视图
- router-link 模板内容,用作跳转路由
当routes路由层级为下文:
const routes = [
{
path:'/',
component: () => import('@/views/index.vue'),
childrens: [
{
path:'/c1',
component: () => import('@/views/c1.vue'),
childrens: [
{
path:'/c1/c2',
component: () => import('@/views/c2.vue'),
}
]
}
]
}
]
路由为`/`的路由下有一层,所以在`/views/index.vue`组件下放置一个router-view组件作为视图输出,
但是如果路由为`/c1/c2`时,在`/`路由下的router-view是无法渲染出`/views/c2.vue`的,
此时需要在`/views/c1.vue`组件中放置router-view组件作为自己下级的视图输出,
由此可见,需要在有子级路由的组件中放置router-view。
关于vue-router有很多可以说的,但最好的方式还是浏览官方网站
有兴趣的时候在更新这个吧,如果有关于vue-router的问题可以回复帖子。。溜了
弱鸡程序员年底还在加班