动态路由是指通过路由参数传递参数,例如在用户访问路径为 /user/:id
时,可以将 :id
作为参数动态传递给路由组件进行处理。Vue.js支持使用冒号 :
来定义动态路由参数,例如:
{
path: '/user/:id',
component: User
}
当用户访问路径为 /user/123
时,路由组件会接收一个 $route
对象,其中包含了当前路由的信息,包括动态路由参数。可以通过 $route.params.id
来获取动态路由传递的参数。
使用动态路由时,可以根据实际需要进行参数验证,例如可以在路由的 beforeEnter
钩子函数中验证参数:
{
path: '/user/:id',
component: User,
beforeEnter: (to, from, next) => {
const userId = to.params.id
if (!isValidUserId(userId)) {
// 如果参数不合法,跳转到 404 页面
next({ path: '/404' })
} else {
// 如果参数合法,继续路由跳转
next()
}
}
}
除了在路由定义中进行参数验证之外,也可以在路由组件内通过 watch
监听 $route
对象的变化,根据新的参数重新渲染组件,例如:
export default {
watch: {
'$route': {
handler(to, from) {
// 根据新的参数重新渲染组件
this.loadUserData(to.params.id)
},
immediate: true // 立即执行一次
}
},
methods: {
loadUserData(userId) {
// 根据用户 ID 加载用户数据
}
}
}
需要注意的是,在监听 $route
对象时,应该通过 immediate
选项来保证组件在初次挂载时就能够根据当前 URL 参数进行渲染。