Vue page jump routes have two ways (router-link and JS)

Vue.js routed through different different URL to access content, multi-view single-page Web applications

1, by  <router-link> implemented

<router-link>  assembly is provided for a navigation link, HTML content switching different

Instructions:

• Simple wording

<router-link to="demo2">demo2</router-link>

 

• Using the v-bind wording

< Router-Link : to = " 'demo2'" > demo2 </ Router-Link > 

<-! May be wrapped with {} or the corresponding path name -> 
< Router-Link : to = "{name: ' demo2 '} " > demo2 </ Router-Link >

 

• Parameter passing wording

<router-link :to="{ name: 'demo2', params: { userId: 123 }}">demo2</router-link>

Where parameter passing requires  router.js be disposed in the path demo2, add a wildcard in the path of demo2: and corresponding to the userId , as follows:

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
},

After the configuration, the result of the page jump / demo2 / 123

Here the "123" is above userId

So, how to obtain parameters to pass over a new page userId it?

In the mounted using a hook in this $ route.params.xx. Gets the parameters passed over, as follows:

mounted () {
    alert(this.$route.params.userId)
}

// 弹出123

 

• Incoming address key-value pairs

<router-link :to="{ path: 'demo2', query: { plan: 'private' }}">demo2</router-link>

The results page jump  / demo2? Plan = private

(Note that this is not used in router.js configuration path inside)

Get to pass over a new page address key-value pair plan, you can be  mounted using the hook in this $ route.plan.xx. Gets pass over the keys to the address below:

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

 

2, achieved by JS

template section:

< Button @click = "the toURL" > jump page </ Button >

script part:

(Note that this is a router, the above is route)

• Simple wording

methods:{
  toURL(){
    this.$router.push({ path: '/demo2' })
  }
}

 

• Parameter passing wording

methods:{
  toURL(){
    this.$router.push({ name: 'demo2', params: { userId: 123 }})
  }
}

 

• Incoming address key-value pairs

methods:{
  toURL(){
    this.$router.push({ name: 'demo2', params: { userId: 123 }, query: { plan: 'private' } })
  }
}