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

海星吧 2023-2-24 3374

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

但由于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的问题可以回复帖子。。溜了

弱鸡程序员年底还在加班
最新回复 (8)
  • 良稗君 2023-2-24
    0 2
    不明觉厉
    考大学去了
  • 涙がtears 2023-2-24
    0 3
    undefined
    北纬三十度的黑
  • 猪肝饭 2023-2-24
    0 4
    有H情节吗
    好好学习,天天向上。
  • Bryan0369 2023-2-25
    0 5
    這事啥啊(
    这个人很懒,什么也没有留下!
  • 小詹在此 2023-2-25
    0 6
    不是物理router的话很少有人愿意了解,因为没必要
    404 NOT FOUND
  • 海星吧 2023-2-25
    0 7
    小詹在此 不是物理router的话很少有人愿意了解,因为没必要
    刚开始写的人会不太懂这种层级的关系。。
    弱鸡程序员年底还在加班
  • 欧派兽 2023-2-25
    0 8
    奖励三
    1:管理员给你移区后会显示移到了你之前发帖的区。 2:点击我作为楼主发帖时一楼下的图片签名,可以跳转到站规教程贴。 3:多次水贴水回复会封号哦? 4:不知道回什么的时候就点“里世界专属”,一键随机生成几种回复内容。 5:祝你在里世界玩得愉快!
  • 海星吧 2023-2-25
    0 9
    欧派兽 奖励三
    感谢感谢
    弱鸡程序员年底还在加班
    • ACG里世界
      10
          
返回
发新帖