Shulou(Shulou.com)06/03 Report--

This article mainly shows you "vuejs how to achieve page jump", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vuejs how to achieve page jump" this article.

The method of realizing page jump by vuejs: 1. Use "..." Statement; 2. Use the "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 to realize Page Jump by Vue routing (router-link and JS)

1. By implementing

Component is used to set up a navigation link to switch between different HTML content

How to use it:

Simple Writing demo2 using v-bind Writing demo2demo2 passing parameters demo2

To pass parameters here, you need to configure the path of demo2 in router.js. Add wildcards: and the corresponding userId after demo2 in path, as follows:

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

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

The "123" here is the userId above.

So, how do you get the passed parameter userId in the new page?

Use this.$route.params.xx. Mounted in the this.$route.params.xx hook. Get the parameters passed as follows:

Mounted () {alert (this.$route.params.userId)} / / Pop-up 123incoming address key value pair demo2

The result of the page jump is / demo2?plan=private

(note that there is no need to configure paths in router.js)

To get the passed address key pair plan in the new page, you can use this.$route.plan.xx. This.$route.plan.xx in the mounted hook. Get the passed address key-value pair, as follows:

Mounted () {alert (this.$route.query.plan)} / / pops up private2, implemented through JS-this.$router.push ()

Template section:

Jump page

Script section:

(note that this is router and above is route)

Simply write methods: {toURL () {this.$router.push ({path:'/ demo2'})}} pass parameter methods: {toURL () {this.$router.push ({name: 'demo2', params: {userId: 123})}} pass in address key value pair methods: {toURL () {this.$router.push ({name:' demo2', params: {userId: 123}) Query: {plan: 'private'}})}} these are all the contents of the article "how does vuejs achieve Page Jump" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.