Vue动态路由写法(简单两步就可实现Vue动态路由)

 分类:vue教程时间:2023-05-07 07:30:01点击:

Vue动态路由是一种根据参数动态匹配路由的机制。其实现本质上是给予了一定规则的声明式路由。

下面简单介绍如何实现 Vue 动态路由:

1、在定义路由时,在路由路径中使用冒号“:”定义参数

routes: [
  {
    path: '/user/:id',
    component: User
  }
]

2、在组件内部通过 $route.params.id 获取参数值

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

在路由配置上使用 path: '/user/:id' 定义了一个含有参数的路由。这个路由匹配以 /user/ 开头,加上任意的数字,并且将这个数字作为路由参数 id 存在 $route.params.id 中。

以上就是 Vue 动态路由的简单介绍和实现,具体可以参考 Vue 官方文档。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: