海星吧的面试宝典:vue-router常见问题解答。

海星吧 2023-2-24 5647

一般来说,浏览器的前进后退会让整个页面进入重新加载页面资源到回流重绘的过程,

但由于vue、react这类的框架是单页应用,所以在点击浏览器的前进后退按钮或触发浏览器此类事件时,都会刷新整个应用。

所以在vue中有vue-router来管理应用的路由,这使得vue可以做到和传统应用一样的路由跳转。

在vue-router中常用的内置组件有

  1. router-view  模板内容,用作路由视图
  2. 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的问题可以回复帖子。。溜了

弱鸡程序员年底还在加班
最新回复 (2)
  • 海星吧 2023-2-25
    0 2
    小詹在此 不是物理router的话很少有人愿意了解,因为没必要
    刚开始写的人会不太懂这种层级的关系。。
    弱鸡程序员年底还在加班
  • 海星吧 2023-2-25
    0 3
    欧派兽 奖励三
    感谢感谢
    弱鸡程序员年底还在加班
    • ACG里世界
      4
          
返回
发新帖