How to implement page jump in vuejs

Vuejs method to implement page jump: 1. Use the "..." statement; 2. Use "this .$router.push({path: 'page url address' })" statement.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Two ways for Vue routing to implement page jumps (router-link and JS)

1. Through Implementation

The component is used to set a navigation link and switch different HTML content

Usage:

• Simple writing method

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

• ##Using v-bind writing method

<router-link :to="&#39;demo2&#39;">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: &#39;demo2&#39; }">demo2</router-link>

• How to write parameters

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>

Passing parameters here needs to be done in

router.js Configure the path of demo2 in , and add the wildcard after demo2 in the path: and the corresponding userId, as follows:

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

After the configuration is completed, the page The result of the jump is

/demo2/123

The "123" here is the above

userId

So, how to add it to the new page? How about getting the passed parameter

userId?

Use

this.$route.params.xx in the mounted hook. Get the passed parameters, as follows:

mounted () {
    alert(this.$route.params.userId)
}
// 弹出123

• Incoming address key-value pair

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>

The page jump result is

/demo2?plan=private

(Note that there is no need to configure the path in

router.js)

To obtain the passed address key-value pair plan in the new page, you can

mounted Use this.$route.plan.xx in the hook. Get the passed address key-value pair, as follows:

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

// 弹出private

2, Implemented through JS ---this.$router.push()

template part:

<button @click="toURL">跳转页面</button>

script part:

(Note Here is router, above is route)

• Simple writing method

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

• Passing parameters Writing method

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

• Incoming address key-value pair

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

Related recommendations ：《

vue.js tutorial》

The above is the detailed content of How to implement page jump in vuejs. For more information, please follow other related articles on the PHP Chinese website!