How to realize Page Jump with vuejs
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!
