vue路由跳转 参数后加括号

### Vue 路由跳转时参数后加括号的实现方法 在 Vue 中，通过 `$router` 对象可以方便地进行路由跳转，并且支持传递参数。如果希望在路由跳转时，在参数后面添加括号或其他特殊字符，可以通过自定义路径模板以及动态拼接字符串来实现。 #### 动态路由配置 首先需要在 `routes` 配置中设置动态路径参数。例如： ```javascript const routes = [ { path: '/user/:username()', name: 'UserDetail', component: () => import('@/views/UserDetail.vue'), meta: { title: '用户详情' } } ]; ``` 这里的 `:username()` 表示我们期望接收一个带有括号形式的参数[^4]。 #### 编程式导航中的参数处理 当使用编程式导航（即调用 `this.$router.push` 方法）时，可以通过手动构建目标路径的方式传入带括号的参数。例如： ```javascript this.$router.push({ path: `/user/${encodeURIComponent('zhangsan(123)')}` }); ``` 这里需要注意的是，由于 URL 的特殊性，某些字符（如括号）可能会被浏览器解析为非法字符，因此建议使用 `encodeURIComponent` 函数对参数进行编码[^3]。 #### 嵌套路由的情况 如果是嵌套路由，则可以在父级路由的基础上进一步扩展子路由的路径模式。例如： ```javascript const routes = [ { path: '/users', component: () => import('@/views/Users.vue'), children: [ { path: ':id()', component: () => import('@/views/UserProfile.vue') } ] } ]; ``` 此时，跳转到某个具体用户的页面时，仍然可以采用类似的编码方式： ```javascript this.$router.push({ path: `/users/${encodeURIComponent('lisi(456)')}` }); ``` #### 接收并解码参数 在目标组件中，可以通过 `$route.params` 获取传递过来的参数，并对其进行解码操作以便于后续使用： ```javascript export default { mounted() { const username = decodeURIComponent(this.$route.params.username); console.log(username); // 输出 zhangsan(123) } }; ``` 这样就可以正确显示和处理带括号的参数了[^1]。 --- ### 示例代码 以下是完整的示例代码展示如何实现这一功能： ```javascript // 定义路由规则 const routes = [ { path: '/profile/:name()', name: 'UserProfile', component: { template: `<div>欢迎来到 {{ decodedName }} 的个人主页</div>`, computed: { decodedName() { return decodeURIComponent(this.$route.params.name); } } } } ]; // 创建路由器实例 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes }); new Vue({ el: '#app', router, methods: { navigateToProfile(nameWithBrackets) { this.$router.push(`/profile/${encodeURIComponent(nameWithBrackets)}`); } }, template: ` <div> <button @click="navigateToProfile('jack(789)')">跳转到 jack(789)</button> <router-view></router-view> </div> ` }); ``` 上述代码展示了如何创建一条能够接受带括号参数的路由规则，并实现了点击按钮触发跳转的功能[^2]。 ---