vue页面的跳转其他页面

 

this.$router.push({
          path: '/customer/record', query: {
            typeName: row.name
          }
        })

typeName 是传递参数




 // 取到路由带过来的参数
           let routerParams = this.$route.query
          // 判断是否有数据
          if (JSON.stringify(routerParams) !== '{}'){
//如果有取值
            this.childrenInfo = routerParams.signing;
//取出以后设置为空(看情况设置)
            this.$router.push({query:{}});
          }else {
//如果没有(看情况设置)
            this.$router.push({path: '/customer/customer'})
          }

 

### Vue 前端页面跳转的实现方式 在 Vue.js 中,页面跳转可以通过多种方式进行实现。以下是几种常见的方式及其具体示例: #### 1. 使用 `router-link` 组件 通过 `router-link` 组件可以轻松创建导航链接。这种方式适用于静态页面之间的跳转场景[^1]。 ```html <template> <div> <!-- 跳转到首 --> <router-link to="/">Home</router-link> | <!-- 跳转到关于 --> <router-link :to="{ name: 'About' }">About</router-link> </div> </template> ``` #### 2. 使用 `$router.push()` 方法 在组件的方法用 `$router.push()` 可以动态触发页面跳转。这种方法适合需要基于逻辑判断来执行跳转的情况[^4]。 ```javascript export default { methods: { navigateToPage() { this.$router.push({ path: '/about' }); // 跳转至 /about 页面 } } }; ``` #### 3. 使用 `$router.go()` 方法 如果需要控制浏览器的历史记录栈,则可以使用 `$router.go(n)` 或其他变体方法完成页面跳转[^3]。 ```javascript this.$router.go(-1); // 返回上一 this.$router.go(1); // 进入下一 ``` #### 4. 编程式导航结合参数传递 当需要携带查询参数或者路径参数时,编程式导航提供了灵活的支持[^2]。 ```javascript // 跳转并附带查询参数 this.$router.push({ path: '/search', query: { keyword: 'Vue', page: 1 } }); // 跳转并设置命名路由以及参数 this.$router.push({ name: 'User', params: { userId: 123 } }); ``` 以上就是 Vue.js 中常用的页面跳转实现方式,开发者可以根据实际需求选择合适的技术手段。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值