精华内容
下载资源
问答
  • Vue页面跳转传参
    2022-04-26 15:04:02

    在有些时候,我们需要跳转到其他页面,但是没有接口将相应的数据传过去,需要前端自己将数据传到另一个页面,那这样的情况怎么做呢?

    要进行传递参数的页面

    首先,在相应的button按钮上,将点击事件附上

    <template slot-scope="{ row }">
                  <el-button @click="goChange(row)">点击传参</el-button>
    </template>

    然后在 methods 下将点击事件添加

     methods: {
        // 跳转到传递参数页
        goChange(row) {
          this.$router.push({
            path: '要跳转的页面地址',
            query: {
              cardNoFirst: row.cardNoFirst,
              cardNoEnd: row.cardNoEnd
            }// 要传递的参数
          })
        }
      }

    要接受参数的页面

    data() {
        return { 
          cardNoFirst: '',
          cardNoEnd: ''
        }
      }, 
    watch: {
        '$route': 'gettingData'
      },
      created() {
        this.gettingData()
      },
      methods: {
        // 获取数据
        gettingData() {
          var queryCardNoFirst = this.$route.query.cardNoFirst
          var queryCardNoEnd = this.$route.query.cardNoEnd
    
          this.cardNoFirst = queryCardNoFirst
          this.cardNoEnd = queryCardNoEnd
        }
      }

    更多相关内容
  • vue页面跳转传参

    2022-01-28 11:00:25
    需求场景:搜索时点击搜索按钮跳转到搜索页面并带搜索关键字。如下图: 方式1:字符串传参: 1.params传参:不带问号,地址栏占位。 先在路由配置如下: { path:'/search/:keyword', component:Search, ...

    需求场景:搜索时点击搜索按钮跳转到搜索页面并带搜索关键字。如下图:

    方式1:字符串传参:

    1.params传参:不带问号,地址栏占位。

    先在路由配置如下:

    {
                path:'/search/:keyword',
                component:Search,
                meta:{footShow:true}
            },

    页面如下: 

    <div class="searchArea">
            <form action="###" class="searchForm">
              <input
                type="text"
                id="autocomplete"
                class="input-error input-xxlarge"
                v-model="keyword"
              />
              <button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
                搜索
              </button>
            </form>
          </div>

    上图v-model的keyword是表单输入框绑定的关键字,点击搜索按钮跳转并传参。

    methods:{
        goSearch(){
          // 字符串传参,params方式:不带问号,地址栏占位。
          this.$router.push('/search/' + this.keyword)
        }
      }

    结果:

     2.query传参:带问号,地址栏不占位。

    goSearch(){
    
          // 字符串传参,query方式:带问号,地址栏不占位。
          this.$router.push('/search/' + "?k=" + this.keyword)
          
        }

    结果:

     方式2:对象方式传参:

    首先得在路由配置name属性:如下图配置name属性为:search

    {
                path:'/search/:keyword',
                component:Search,
                meta:{footShow:true},
                name:"search"
            },
    goSearch(){
          // 对象方式传参params
          this.$router.push({
            name:'search',
            params:{
              keyword:this.keyword,
            }
          })
          
        }
    this.$router.push({
            path:'/search',
            query:{
              k:this.keyword,
            }
          })

    结果:

    注意:如果对象形式传参,params方式要用name属性,而query方式要用path属性、

    写在最后:如果params参数不传递(传空字符串):

    需要在路由配置时path后面加上问号(问号代表可传可不传),如下:

    {
                path:'/search/:keyword?',
                component:Search,
                meta:{footShow:true},
                name:"search"
            },

    传递方法如下:

     this.$router.push({
            name:'search',
            params:{
              keyword:''|| undefined ,
            }
          })

    展开全文
  • vue 页面跳转传参

    千次阅读 2020-12-19 08:10:23
    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了;但是vue不一样 需要操作的是路由history,需要用到 VueRouter,示例:常用的场景是:列表页点击“查看”按钮,跳转到详情页。在...

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了;

    但是vue不一样 需要操作的是路由history,需要用到 VueRouter,

    示例:

    常用的场景是:列表页点击“查看”按钮,跳转到详情页。

    在列表页(list.vue)按钮点击事件里写上

    detail(row) {

    this.$router.push({ path: "detail", query: { id: row.id } });

    },

    在详情页(detail.vue)里写上

    let id = Number(this.$route.query.id);

    即可获取到参数id了。

    解析

    先看看 $router 和$route是什么,在vscode f12后

    看到

    declare module "vue/types/vue" {

    interface Vue {

    $router: VueRouter;

    $route: Route;

    }

    }

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

    VueRouter官网 传送门

    route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

    其中

    params

    {}对象,包含路由中的动态片段和全匹配片段的键值对 用来实现 /order.detail/1

    query

    {}对象,包含路由中查询参数的键值对。 用来实现 /order/detail?id=1

    展开全文
  • vue路由传参的三种基本方式 方案一: 直接调用$router.push 实现携带参数的跳转 getDescribe(id) { this.$router.push({ path: `/describe/${id}`, }) 需要对应路由配置如下: { path: '/describe/:id', ...

    vue路由传参的五种基本方式

    方案一: 
    
    直接调用$router.push 实现携带参数的跳转
       getDescribe(id) {
        this.$router.push({
         path: `/describe/${id}`,
       })
       需要对应路由配置如下:
       {
         path: '/describe/:id',
         name: 'Describe',
         component: Describe
       }
    很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
    
    this.$route.params.id
    
    
    方案二:
    
    父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
    
           this.$router.push({
              name: 'Describe',
              params: {
                id: id
              }
            })
    对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示
    
       {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }
    子组件中: 这样来获取参数
    
    this.$route.params.id
    
    方案三:
    
    父组件:使用path来匹配路由,然后通过query来传递参数
    这种情况下 query传递的参数会显示在url后面?id=?
    
        this.$router.push({
              path: '/describe',
              query: {
                id: id
              }
            })
    对应路由配置:
    
       {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }
    对应子组件: 这样来获取参数
    
    this.$route.query.id
    
    方案四、还有一种就是使用vuex
    
        在App.vue中,created初始化生命周期中写入以下方法
    	
    	 
    	//在页面刷新时将vuex里的信息保存到localStorage里
    	window.addEventListener("beforeunload",()=>{
    	  localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
    	})
    	 
    	//在页面加载时读取localStorage里的状态信息
    	localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
    	
    	replaceState这个方法呢,查了api,就是替换 store 的根状态,然后通过对象赋值assign将localStorage进行赋值
    
    	beforeunload这个方法是在页面刷新时触发的,将store中的信息存入localStorage
    
    	这样就通过localStorage来避免vuex刷新数据消失的问题了。
    
    方案五、简单粗暴的方式直接使用localStorage
    	
    以上是路由传参和vuex存值、传值的时候刷新页面数据消失的解决办法。
    展开全文
  • 作者也是初学者,对两者区别大致认为: 1、简单参数传递的实现可以用query比较方便简单,多参数建议使用params 2、query会把参数显示在浏览器地址栏的path后面,而params相当于隐式的 3、params的参数页面刷新会清空...
  • 需求是跳转至工单申请详情页面 vue.js中路由配置代码: import Layout from '@/layout' const repairRouter = { path: '/repair', component: Layout, alwaysShow: true, name: 'repair', meta: { title: ...
  • vue路由跳转携带参数时query和params的区别 注意:带参数传参的时候,当用params进行传参的时候只能由name引进路由;当使用query进行传参的时候,以path,name引入路由都是可以的
  • element 展示表格(页面A),点击表格的每一行的查看详情按钮,可以携带此行的信息参数跳转到另一个页面页面B),但是从A页面到B页面,只有第一次跳转的时候B页面可以获取到A页面的参数,返回再次A->B ,B页面...
  • table.vue传参页面: 如下:在methods:{ 写修改的方法} 两种方法传参, 第一种传参 name 与 结合使用params ,第二种传参 path 与 query结合使用 ,区别:query更加类似于我们ajax中get传参...
  • 跳转传参: query传参 参数会在链接后面显示 this.$router.push({ path: "/home", query: { id: 1 }, }); params传参 参数不会显示在链接后面 this.$router.push({ name: "/home", params: { id: 1 }, })...
  • 在上一篇博客里,我记录了Vue中路由的基础知识Vue全家桶学习—VueRouter路由基础,今天写一下路由的“ 高级用法 ”,主要包括路由跳转传参和路由前置守卫,顺便记录一下命名路由和嵌套路由。 一、命名路由 二、嵌...
  • vue3跳转传参

    2021-08-09 15:33:19
    vue2写法 1.加入传递的参数值 <router-link :to="{...2. 页面接收参数 const couponId = this.$route.query.couponId vue3中与vue2不同: <router-link:to="'/bindAccount/'+scope.row.id"class="lin...
  • query传参 // query传参 // 传值 this.$router.push({ name: 'orderList', query: { conlltion: id }}) this.$router.push({path:'/orderList',query: {conlltion: id }}) // html取值 $route.query.conlltion // ...
  • 1.通过query传参: // 传参 const handleJump = (id) => { router.push({ path: '/xxx', //router里的路由配置 query: { id: id } }) } // 参数接收 onMounted(()...
  • 1.通过query进行传参。 function acty() { router.push({ path: '/tiaozhn', query: { som: "Aaa" } }) } console.log(route.query.som); 2.通过params进行传参。 function ...
  • 最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。 典型应用场景:列表页跳转到详情页 一、配置路由 文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router...
  • vue路由跳转传参乱码解决

    千次阅读 2019-12-09 11:29:41
    vue路由组件跳转传参中文乱码解决 -在路由传参this.$router.push("/index?uname=xxx") 在下一个页面加载时截取导航栏中的参数 用location.href截取到导航栏 再用截取或者正则截取,我用的是截取中的split方法 下一个...
  • 跳转到 path:’/login’ 的页面 2  路由跳转传参 2.1   传参页面中  :    2.2   参数接收 data() { return { id: this.$route.params.id, // 将 URL 地址中传递过来...
  • vue 路由跳转页面传参和该页面获取参数方式 一、实现页面功能效果 二、页面代码实现 三、js代码 <script> import { getOneDormInfo, getDormsPerson} from '@/api/appGrade' export default { methods:{ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,237
精华内容 4,494
关键字:

vue页面跳转传参