vue怎么實現A頁面跳轉到B頁面

vue實現A頁面跳轉到B頁面的方法：1、設置A頁面，代碼如“”；2、將跳轉的url添加到$router中；3、設置B頁面，代碼如“created() {…}”；4、修改js內容即可。

本文操作環境：windows7系統、Vue2.9.6版，DELL G3電腦。

vue怎么實現A頁面跳轉到B頁面？

vue 從A界面跳轉到B界面并攜帶參數

最近遇到一個需求，需要從A界面點擊一個按鈕跳轉到B界面，并且攜帶參數。

我是這樣子實現了需求：

A頁面：

<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>

點擊事件：

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

將將跳轉的url添加到 $router中。

path 中的url 最前面加 / 代表是根目錄下，不加則表示是子路由。

通過path + params的組合傳遞參數。

B頁面：

created() {     this.getParams()   },   watch: {     // 監測路由變化,只要變化了就調用獲取路由參數方法將數據存儲本組件即可     $route: 'getParams'   },   methods: {     getParams() {       // 取到路由帶過來的參數       const res = this.$route.params.status       console.log('getParams', res)     }}

最后，還需在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 }       }     ]}

這樣，便可實現了跳轉。（PS：這是目前發現的比較好的方法，希望哪位大佬有更好的方法指導。）