Detailed explanation of vue+query passing parameters-JS Tutorial-php.cn

Detailed explanation of vue+query passing parameters

php中世界最好的语言

Release： 2018-04-18 09:38:52

Original

2738 people have browsed it

This time I will bring you a detailed explanation of the steps for passing parameters in vue query. What are the precautions for passing parameters in vue query? The following is a practical case, let’s take a look.

I am learning Vue recently. This article introduces the use of vue params and query parameters. Share it with everyone and leave a note for yourself

Declarative:

Programming: router.push(...)

Both methods can implement jump links. Continuing from the previous article, jump links to component B through component A and pass parameters.

1. Router.push uses

router/index.js

export default new Router({
 routes: [
   {
   path: '/',
   name: 'A',
   component: require('../components/A')
  },
  {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }
 ]
})

Copy after login

Above, add two parameters name and age

to component B in routing

A component, bind a @click

event, jump to B component to pass parameters, use params

<template>
 <p> <!---只允许有一个最外层标签 ！-->
  <p>
   <p>{{message}}</p>
   <p @click="toBFun">跳转B组件啊啊</p>
   <!--<router-link :to="{ path: &#39;/B&#39;,params:{name:&#39;zs&#39;,age:22}}">跳转B组件啊啊</router-link>-->
  </p>
 </p>
</template>
<script>
 export default {
  data: function () {
   return {
    message: 'vue好帅啊！'
   }
  },
  methods: {
   toBFun: function(){
    this.$router.push({name:'B',params:{name:'xy',age:22}});
   }
  }
 }
</script>
<style>
</style>

Copy after login

At this time, the browser will display: http://localhost:8080/#/B/xy/22

Take a look at the query

Transfer value and address change

Also in the router/index.js routing file, there are two unchanged parameters name, age

 {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }

Copy after login

In component A, parameters were previously passed through params,

this.$router.push({name:'B',params:{name:'xy',age:22}});

Copy after login

After replacement, query

 this.$router.push({name:'B',query:{name:'xy',age:22}});

Copy after login

At this time, the browser will find: http://localhost:8080/#/?name=xy&age=22

Through the above two methods, the parameters will be retained after the page is refreshed.

Getting the value is somewhat different:

params: this.$route.params.name;

query:this.$route.query.name;

-------------------------- There is another way --------------------------- -----------------------

Use router-link

 <router-link :to="{ path: &#39;/B&#39;,query:{name:&#39;张飞&#39;,age:22}}">跳转B组件</router-link>

Copy after login

After the jump, the browser address is: http://localhost:8080/#/B?name=zzz&age=22

Same as this.$router.push(...)

 <router-link :to="{path:&#39;/B/123&#39;}">
    跳转B组件</router-link>
  </p>

Copy after login

{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }

Copy after login

Value

this.$route.params.name

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!