vue动态路由

原创于 2022-03-27 18:09:43 发布 · 121 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍如何在Vue.js中使用Vue Router进行动态路由配置，并通过路径参数:id来切换不同的组件实例，实现单页面应用中组件的复用。

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

main.js下

import Detail from '@/components/Detail.vue'

const router=new VueRouter({
  routes:[
    { path: '/detail/:id', component: Detail }
    //加上：id就可以实现只引入一个组件在多个相同组件之间切换
  ]
})

<router-link to="/detail/1">one</router-link>
<router-link to="/detail/2">two</router-link>
<router-link to="/detail/3">three</router-link>