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

This article introduces the relevant knowledge of "how vue can jump from page A to page B". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

This article operating environment: windows7 system, Vue2.9.6 version, DELL G3 computer.

How does vue jump from page A to page B?

Vue jumps from interface A to interface B and carries parameters

Recently there is a requirement that you need to jump from interface A to interface B by clicking a button with parameters.

This is how I fulfilled my needs:

A page:

{{$t ('common.add')}} {{$t (' common.edit')}}

Click event:

Add () {this.lockTaskStatus = 'new' this.toLockTaskManagePage ()}, edit () {this.lockTaskStatus =' edit' this.toLockTaskManagePage ()}, toLockTaskManagePage () {this.$router.push ({path:'/ taskLockManage', name: 'TaskLockManage', params: {status: this.lockTaskStatus}})}

Add the jumped url to $router.

The url in path is preceded by / in the root directory, and if it is not added, it is a child route.

Parameters are passed through the combination of path + params.

Page B:

Created () {this.getParams ()}, watch: {/ / monitor routing changes. Call the method to obtain routing parameters to store the data in this component $route: 'getParams'}, methods: {getParams () {/ / get the parameter const res = this.$route.params.status console.log (' getParams', res)}} brought by the route

Finally, you need to register with router/index.js:

{path:'/ taskLockManage', component: Layout, redirect:'/ taskManage/index', hidden: true, children: [{path: 'taskLockManage', component: () = > import (' @ / views/taskManage/taskLockManage'), name: 'TaskLockManage', meta: {title:' taskLockManage', icon: 'user', noCache: true}]}

In this way, the jump can be realized. PS: this is a better method that has been found so far. I hope which boss has a better method to guide. )

This is the end of the content of "how to jump from page A to page B in vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.