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

demo2

• ##Using v-bind writing method

demo2  demo2

• How to write parameters

demo2

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

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

/demo2/123

userId

userId?

this.$route.params.xxin themountedhook. Get the passed parameters, as follows:

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

• Incoming address key-value pair

demo2

/demo2?plan=private

router.js)

mountedUsethis.$route.plan.xxin the hook. Get the passed address key-value pair, as follows:

mounted () { alert(this.$route.query.plan) } // 弹出private

跳转页面

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

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!