在 Vue Router 4 中,动态路由是一种非常强大的功能,它允许我们根据不同的 URL 参数来渲染不同的组件或者同一组件的不同状态。这对于创建用户个人页面或者具有大量内容的应用来说非常有用。
基本用法
要创建一个动态路由,我们可以在路由的路径中添加一个冒号 :
,后面跟上参数的名字。例如:
const routes = [{ path: '/user/:id', component: User }
]
在这个例子中,:id
就是一个路由参数。当我们访问 /user/1
的时候,User
组件就会被渲染出来,并且 this.$route.params.id
的值会是 '1'
。
动态路由匹配
Vue Router 4 提供了强大的动态路由匹配功能,可以让我们更灵活地处理路由参数。例如,我们可以使用正则表达式来限制路由参数的格式:
const routes = [{ path: '/user/:id(\\d+)', component: User }
]
在这个例子中,:id(\\d+)
表示 id
参数必须是数字。当我们访问 /user/abc
的时候,由于 abc
不是数字,所以不会匹配到 User
组件。
动态路由的参数传递
在 Vue Router 4 中,我们可以通过多种方式来传递路由参数。最常见的方式是在 path
中定义参数,然后在 URL 中传递。但是,我们也可以在导航的时候,通过 params
选项来传递参数:
router.push({ name: 'user', params: { id: '123' }})
在这个例子中,我们通过 name
选项来指定要导航到的路由,然后通过 params
选项来传递参数。这种方式的好处是,我们可以在不改变 URL 的情况下,传递任意类型的参数。
路由参数的响应式
在 Vue Router 4 中,路由参数是响应式的。也就是说,当我们在同一个路由内部改变参数的时候,对应的组件不会被重新创建,而是会复用。同时,组件内部可以通过 watch
来监听 $route
对象的变化,从而做出相应的动作。例如:
const User = {template: '<div>User {{ $route.params.id }}</div>',watch: {'$route' (to, from) {// 对路由变化作出响应...}}
}
在这个例子中,当我们从 /user/1
导航到 /user/2
的时候,User
组件会被复用,同时 $route
对象会发生变化,触发 watch
中的回调函数。
注意事项
在使用动态路由的时候,有一些需要注意的地方:
- 当路由参数变化的时候,对应的组件会被复用,而不是重新创建。这意味着组件的生命周期钩子不会被调用。如果我们需要在参数变化的时候做一些操作,可以通过
watch
来监听$route
对象的变化。 - 在导航到新的路由的时候,我们可以通过
replace
选项来控制是否在浏览器的历史记录中创建新的记录。例如,router.push({ path: '/user/1', replace: true })
会导航到/user/1
,但是不会在历史记录中创建新的记录。