vue的跳转方式(打开新页面)及传参
Vue 方式 打开 跳转 传参
2023-09-11 14:19:38 时间
1. router-link跳转
// 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two', query:{id:1,name:'vue'}}"> </router-link> // 参数获取 id = this.$route.query.id // 新窗口打开 <router-link :to="{path:'/detail/three', query:{id:1,name:'vue'}}" target="_blank"> </router-link>
2. this.$router.push跳转
toDeail (e) { this.$router.push({path: "/detail", query: {id: e}}) } // 参数获取 id = this.$route.query.id toDeail (e) { this.$router.push({name: "/detail", params: {id: e}}) } // 注意地址需写在 name后面 //参数获取,params和query区别,query参数在地址栏显示,params的参数不在地址栏显示 id = this.$route.params.id
3. this.$router.replace跳转
//和push的区别,push有记录一个history,replace没有 toDeail (e) { this.$router.replace({name: '/detail', params: {id: e}}) }
4. resolve跳转
//resolve页面跳转可用新页面打开 //2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了(这边应用:https://segmentfault.com/q/1010000009557100下的一个回答) toDeail (e) { const new = this.$router.resolve({name: '/detail', params: {id: e}}) window.open(new.href,'_blank') }
接收方怎么接收参数 this.$route.query.serid和this.$route.params.setid,以下举一个接收的例子
注意接收参数时是 $route 不是 $router
<template> <div> testDemo{{this.$route.query.setid}} </div> </template>
接收的参数:
<template> <div>userlist--{{mallCode}} </div> </template> <script> export default { name: "UserList", date:function(){ return {"mallCode":mallCode} }, created(){ this.getParams() }, methods:{ getParams() { // 取到路由带过来的参数 const routerParams = this.$route.query.mallCode; this.mallCode = routerParams; console.log(this.$route.query); // 将数据放在当前组件的数据内 //this.mallInfo.searchMap.mallCode = routerParams; //this.keyupMallName() } } } </script> <style scoped> </style>
转 : https://blog.csdn.net/qq_28353055/article/details/84099004
https://blog.csdn.net/Janus_lian/article/details/84965459
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- 快速构建一个使用axios的vue应用程序(转)
- vue生成路由实例
- vue组件定义方式
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- springboot+vue实现前后端分离之前端vue部分(spring boot 2.5.4/vue.js 3.2.4)
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- vue父子组件传值:子修改父
- SAP UI5和Vue的数据双向绑定实现原理比较
- CDN方式使用Vue组件通信
- Vue中vue-i18n结合element-ui实现国际化
- 220:vue+openlayers 加载动画,采用css的@keyframes方式
- 108:vue+openlayers实现多个图形的合并、交叉、差集等( 示例代码 )
- 056:vue+openlayers风场快速移动效果(代码示例)
- 点击按钮切换div及其内容(两种方法:Vue指令方式、原生DOM操作方式)
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue组件间通信方式都有哪些?