"; 2. Add the jump url to $router; 3 , set the B page, the code is such as "created() {...}"; 4. Modify the js content."/> "; 2. Add the jump url to $router; 3 , set the B page, the code is such as "created() {...}"; 4. Modify the js content.">
Home > Article > Web Front-end > How to jump from page A to page B in vue
Vue implements the method of jumping from page A to page B: 1. Set page A with code such as "
"; 2. Add the redirected url to $router; 3. Set page B , code such as "created() {...}"; 4. Modify the js content.
The operating environment of this article: Windows 7 system, Vue version 2.9.6, DELL G3 computer.
How does vue jump from page A to page B?
vue jumps from interface A to interface B and carries parameters
I recently encountered a need to click a button from interface A to jump to B interface and carries parameters.
I implemented the requirement like this:
A page:
<el-button size="mini" type="success" @click="add" icon="el-icon-plus" round plain>{{$t('common.add')}}</el-button> <el-button type="primary" size="mini" @click="edit" icon="el-icon-edit" plain round>{{ $t('common.edit') }}</el-button>
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 redirected url to $router middle.
Adding / at the front of the url in the path means it is in the root directory. If it is not added, it means it is a sub-route.
Pass parameters through a combination of path params.
B page:
created() { this.getParams() }, watch: { // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可 $route: 'getParams' }, methods: { getParams() { // 取到路由带过来的参数 const res = this.$route.params.status console.log('getParams', res) }}
Finally, you need to register in 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 achieved. (PS: This is a better method found so far. I hope someone can provide better guidance.)
Related recommendations: "vue.js Tutorial"
The above is the detailed content of How to jump from page A to page B in vue. For more information, please follow other related articles on the PHP Chinese website!