vue实现拼接路径实现跳转
在Vue中拼接路径并实现跳转
使用Vue Router的router.push方法结合模板字符串或路径拼接方法
// 在方法中拼接路径
methods: {
navigateTo(path) {
const fullPath = `/category/${path}`
this.$router.push(fullPath)
}
}使用动态路由参数
在路由配置中定义动态参数，通过params传递
// router.js配置
{
path: '/user/:id',
name: 'User',
component: UserComponent
}
// 组件中使用
this.$router.push({ name: 'User', params: { id: 123 } })使用查询参数拼接
通过query对象添加查询参数
this.$router.push({
path: '/search',
query: {
keyword: 'vue',
page: 2
}
})使用模板字符串拼接复杂路径
const userId = 'abc123'
const postId = 'xyz789'
this.$router.push(`/user/${userId}/post/${postId}`)编程式导航与路径拼接结合
const basePath = '/products'
const category = 'electronics'
const productId = 456
this.$router.push(`${basePath}/${category}/${productId}`)使用path-to-regexp库处理复杂路径
import { compile } from 'path-to-regexp'
const toPath = compile('/user/:id/posts/:postId')
const path = toPath({ id: 123, postId: 456 })
this.$router.push(path)注意事项
路径拼接时需考虑URL编码问题，特殊字符需使用encodeURIComponent处理
动态路由参数需与路由配置中的模式匹配 参数传递方式需保持一致（params或query） 命名路由方式更易维护，减少硬编码路径
