使用vue進行登入後路由跳轉處理

2021-10-09 03:59:47 字數 1237 閱讀 6789

接上文登入頁面編寫

登入成功後在components資料夾下新建home.vue:

home元件


<


/div>


<


/template>


export


default


<


/script>


"less" scoped>


<


/style>
router資料夾下index.js修改為：

import vue from


'vue'


import vuerouter from


'vue-router'


import login from


"../components/login"


;import home from


"../components/home"


vue.


use(vuerouter)


const routes =[,


,]const router =


newvuerouter()


export


default router
login.vue的methods下的login方法修改為：

login()


解構，將得到的返回值的data解構為res


console.


log(response.data)


// console.log(res.meta.statustext)


//從res的元資料中得到返回狀態


if(response.status !==


200)


return;if


(response.data.token);if


(response.data.error)


return


this


.$message.


error


(response.data.error);}


);},
執行，輸入賬號密碼後登入：

下一步：

使用導航守衛，根據sessionstorage中是否有token判斷登入與否

vue使用路由進行頁面跳轉時傳遞引數

本文主要介紹了vue中使用路由進行頁面的跳轉時,vue的路由如何傳遞引數,第二個頁面如何獲取引數.path 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航 params 是要傳送的引數,引數可以直接key value形式傳遞 query 是通過 url 來傳遞引...

vue路由跳轉 vue router的使用

1 路由物件和路由匹配 路由物件，即 router會被注入每個元件中，可以利用它進行一些資訊的獲取。如 屬性說明 route.path 當前路由物件的路徑，如 view a rotue.params 關於動態片段 如 user username 的鍵值對資訊,如 route.query 請求引數，如...

Vue 中進行路由跳轉傳引數

vue使用宣告式，router link進行跳轉 1.不傳遞任何的引數 不傳遞任何的引數 跳轉頁面2.傳遞引數 通過query方式進行 路由跳轉 等同於 this.router.push link跳轉 通過query方式進行 路由跳轉 等同於 this.router.push link跳轉param...