VUE 之 动态路由

动态路由:

<router-link tag="li" 
			:to="{name:'question', params:{id:question.questionId}}"  // question/123
			// :to="{name:'question', query:{id:question.questionId}}" // question?questionid=123
			v-for="question in questionList" 
			:key="question.questionId"> 
			{
  { question.title }} 
</router-link>
{
   
	path:'/question/:id',
	name:'question',
	component:() => import('/.views/Question')  //懒加载
},

Question.vue:

<div class="question
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Router动态路由是指在Vue项目中根据后端返回的数据来设置路由的一种方式。通常情况下,我们在前端配置路由,但在某些需要权限控制的项目中,我们可能需要根据用户角色或其他条件来动态设置路由。 动态路由设置一般可以分为两种情况。第一种是简单的角色路由设置,例如只根据用户的角色来判断是否显示某个路由或某个路由组件。第二种是复杂的路由权限设置,例如在OA系统中,不同角色的用户可能有不同的权限配置,需要后端返回路由列表,前端根据返回的路由数据来渲染路由和组件。 对于动态路由的实现,可以将后端返回的路由数据格式化成一定的结构,例如一个包含路径、组件、重定向、名称和元数据等信息的对象数组。然后,在Vue Router中通过路由的addRoutes方法将动态路由添加到路由表中。 需要注意的是,页面跳转和路由守卫处理是异步的,当动态路由添加后可能会出现跳转到空白页面的情况。这是因为在执行路由的next()方法时,路由数据可能尚未完全加载。一种解决方法是通过调用window.location.reload()来刷新路由,确保路由数据已经加载完毕。 综上所述,Vue Router动态路由是一种根据后端返回的数据设置路由的方式,可以实现权限控制和灵活的路由配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值