vue params, query using mass participation

Declarative: <router-link: to = "...">
Programming formula: router.push (...)

Both approaches can be achieved hoplinks in the article continues, jump through the A component linked to the B component and pass parameters.

1, router.push use

  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')
    }
  ]
})

 

Top, two parameters added to B component name in the route, age 

 

A component, a binding event @click jump parameter passing the params component B

<Template> 
  <div> <! --- allows only one outermost label! -> 
    <div> 
      <P> Message {} {} </ P> 
      <P = @ the Click "toBFun"> Component B Ah jump </ P> 
      <- <Router-Link:! = To "{ path: '/ B', params : {name: 'zs', age: 22}} "> component B ah jump </ Router-Link> -> 
    </ div> 
  </ div> 
</ Template> 
<Script> 
  Export default { 
    Data: function () { 
      return { 
        Message: 'VUE ah handsome! ' 
      } 
    }, 
    Methods: { 
      toBFun: function () { 
        the this $ router.push ({name:.' B ', the params: {name:' XY ', Age: 22 is}});

In this case the browser will display:

http://localhost:8080/#/B/xy/22

 

Look at the query by value and address changes

Also unchanged router / index.js routing file has two parameters name, age

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

 

In the component A, prior to passing through the parameter params,

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

After the replacement, query

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

In this case the browser will find:

http://localhost:8080/#/?name=xy&age=22

 

By the above two, the page refreshes, the parameters will be retained.

Some do not get the same value:

params：this.$route.params.name;
query:this.$route.query.name;

 

There are ways ---------------------- ------------------------ ----------------------

 Using the  router-link

  <Router-link: to = "{path: '/ B', query: {name: 'Zhang', age: 22}}"> Jump assembly B </ router-link>

After the jump, the browser address:

http://localhost:8080/#/B?name=zzz&age=22

with  

this. $ router.push (...) is the same

 

 

-----------

  <router-link: to = " {path: '/ B / 123'}"> 
        Jump assembly B </ Router-Link> 
    </ div>

 

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

The value

this.$route.params.name