在vue项目中创建二级动态路由

不要讲废话

于 2020-11-10 21:18:56 发布

阅读量855

点赞数

文章标签： vue javascript

版权

本文介绍了如何在Vue项目中设置并实现二级动态路由的跳转，详细讲解了在`router.js`文件中的配置过程，包括路由的定义和导航守卫的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中实现二级动态路由的跳转：

<div  @click="handleToDetail(type, id)" :type="type" :key="id">
	内容
</div>

script代码：

methods: {
    handleToDetail (type, id) {
      // 编程式导航
      this.$router.push('/detail/' + type + '/' + id)
    }
  }

router.js代码：

export default {
  // 动态路由配置
  path: '/detail/:type/:id',
  component: () => import('@/views/detail')
}