VUE-JS跳转路由(编程式路由)及history模式

博客介绍了index.js的配置情况,还提及JS跳转路由(编程式路由),并特别指出是history模式,属于前端开发中关于路由配置和跳转的相关内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

index.js配置如下

JS跳转路由(编程式路由):


history模式:


### 使用 Vue Router 进行编程式导航并传递参数 在 Vue.js 应用程序中,通过 `vue-router` 实现编程式导航可以灵活控制页面之间的跳转逻辑。编程式导航允许开发者通过 JavaScript 方法触发路由变化,而不是依赖于 `<router-link>` 组件。 #### 编程式导航基础 为了执行编程式导航,通常会使用 `$router.push()` 或者其他类似的 API 函数[^2]。这些方法能够改变当前的应用路径而无需重新加载整个页面。 #### 路由配置示例 下面是一个简单的路由配置例子,在此配置基础上展示如何进行带参的编程式导航: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', redirect: '/userList' }, { path: '/userList', name: 'UserList', component: () => import('../views/user/UserList') // 动态导入组件 }, { path: '/user/:id', // 定义动态段 :id 来接收参数 name: 'UserProfile', component: () => import('../views/user/UserProfile'), props: true // 启用将 URL 参数作为 prop 自动绑定给目标组件的功能 } ]; export default new VueRouter({ mode: 'history', // 移除URL中的# base: process.env.BASE_URL, routes }); ``` #### 编程式导航与传参实践 假设有一个场景是从用户列表页(UserList)点击某个用户的链接进入该用户的个人资料页(UserProfile),此时可以通过编程方式携带用户ID(`userId`)前往指定的目标路由。 ##### 方案一:利用 params 传递单个 ID 值 当定义好带有冒号前缀的动态部分 `/user/:id` 的时候,就可以很方便地向 UserProfile 页面发送特定 id 的值了。 ```javascript // 在 UserList.vue 文件内某处触发事件处理函数 methods: { goToUserProfile(userId){ this.$router.push({ name: 'UserProfile', params: { id: userId } // 将 userId 作为 param 发送出去 }); } } ``` 注意这里使用的是命名路由的形式 (`name:'UserProfile'`) 并且指定了要传送的具体参数名和对应的变量值。 如果希望直接操作路径字符串,则应采用如下形式: ```javascript this.$router.push(`/user/${userId}`); ``` 但是这种方式下无法访问到 params 数据,除非再次解析 url 获取其中的信息。 ##### 方案二:借助 query 添加查询字符串 另一种常见的做法是在 URL 上附加查询参数,这使得 URL 更加直观易读,并且可以直接分享含有具体条件的链接地址。 ```javascript this.$router.push({ path: '/user/profile', query: { user_id: userId, action: 'view' } // 可以附带多个键值对 }); ``` 这样形成的最终 URL 类似于 `/user/profile?user_id=1&action=view` ,可以在任何地方轻松复制粘贴这个完整的 URL 访问相同的资源。 对于接收到参数的一方来说,无论是哪种情况都可以通过 `this.$route.params` 或者 `this.$route.query` 来获取相应的数据[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值