Vue路由應用詳細講解
介紹
vue-router相當于vue內部跳轉鏈接,將需要切換的頁面在vue-router里注冊,在項目里配置就能完成頁面的切換,它不僅能完成項目的切換,還能實現(xiàn)參數(shù)的傳遞,它還有個很重要的功能路由導航守衛(wèi)(導航守衛(wèi)分為前置導航守衛(wèi),后置導航守衛(wèi),組件內置導航守衛(wèi),常用就是前置導航守衛(wèi),設置用戶登錄可訪問的界面和未登錄可訪問的界面,也相當于二次攔截,(axios請求攔截器是第一次攔截))。
路由跳轉和傳參
重點:
在vue-router中,有兩大對象被掛載到了實例this;
$route(只讀、具備信息的對象);
$router(具備功能的函數(shù));
1.router-link(類似a標簽)
路由配置:
// 路由配置
{
path: '/pkproperties', // 路徑
name:'pkproperties', // 路由名,path路徑必寫,用name跳轉的時候是根據(jù)name名找到path進行跳轉
component: () => import('@/views/pkproperties'), // 組件(組件文件名為index的可省略),路由懶加載寫法
redirect: '', // 路由重定向,就是當一個頁面需要切換多個路由的時候,這里面填的是首次進入頁面展示的路由組件地址
hidden: true,
children: [] // 嵌套路由,當一頁有很多路由需要切換的時候,就需要用到嵌套路由
},
// 組件內使用
<router-link to="/pkproperties">點擊跳轉</router-link> // path路徑跳轉
<router-link to="{name:'pkproperties',query:{id:1}}">點擊跳轉</router-link> // 使用命名路由name跳轉
傳參配置:
{
path: '/pkproperties', // 路徑
name:'pkproperties', // 路由名,path路徑必寫,用name跳轉的時候是根據(jù)name名找到path進行跳轉
component: () => import('@/views/pkproperties'), // 組件(組件文件名為index的可省略)
hidden: true
},
// 使用命名路由傳參,可以傳遞基本數(shù)據(jù)類型和數(shù)組和對象
<router-link to="{name:'pkproperties',query:{id:1}}">點擊跳轉</router-link> // name名跳轉,query傳遞參數(shù)
<router-link to="{name:'pkproperties',params:{id:1}}">點擊跳轉</router-link> // name名跳轉,params傳遞參數(shù)
this.$route.query.id // 獲取傳遞的參數(shù)(.傳遞參數(shù)的鍵名)
this.$route.params.id // 獲取傳遞的參數(shù)(.傳遞參數(shù)的鍵名)
2.編程式路由跳轉(最常用的,不受時機、條件的限制)
路由配置:
{
path: '/pkproperties', // 路徑
name:'pkproperties', // 路由名,path路徑必寫,用name跳轉的時候是根據(jù)name名找到path進行跳轉
component: () => import('@/views/pkproperties'), // 組件(組件文件名為index的可省略)
hidden: true
},
傳參配置:
methods:{
onSkipTransferParameters(){
// params傳參
this.$router.push({
name: "pkproperties",
params: {
name: '小明',
id: 1,
},
});
onSkipTransferParameters(){
// query傳參
this.$router.push({
name: "pkproperties",
query: {
name: '小明',
id: 1,
},
});
}
// 獲取傳遞的參數(shù)
this.$route.params.name // 獲取就是在當前跳轉的組件內調用$route實例,是用params就.params.鍵名獲取值
this.$route.query.name // 獲取就是在當前跳轉的組件內調用$route實例,是用query就.query.鍵名獲取值
query傳參在刷新界面后傳遞的數(shù)據(jù)不會丟失,params傳遞的參數(shù)刷新界面后會丟失參數(shù)。
3.路由重定向redirect需要用到傳參的業(yè)務
{ path:"/", redirect: {path:"pkproperties", query:{Pid:'1'}} },
{ path:"pkproperties", component: ()=>import("../views/pkproperties") }
解決路由重復點擊路由沉積的問題
// 把這段代碼直接粘貼到router/index.js中的Vue.use(VueRouter)之前
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
return originalPush.call(this, location).catch(err => { })
};
注意:一定要寫在 Vue.use(VueRouter)之前否則無效
解決路由跳轉后不能回到頂部的頁面頂部的問題
在跳轉到的組件里配置下面的代碼即可
mounted() {
/**
* 路由跳轉回到頂部
*/
// chrome
document.body.scrollTop = 0;
// firefox
document.documentElement.scrollTop = 0;
// safari
window.pageYOffset = 0;
},
路由導航守衛(wèi)和案例展示
路由前置導航守衛(wèi)(beforeEach)
// 全局導航守衛(wèi)beforeEach
router.beforeEach((to, from, next) => {
// to要到哪個路由去
// from從哪個路由來
// next下一步(無論失敗與否都要調用,否則會阻止程序繼續(xù)執(zhí)行)
}案例1中使用(攔截未登錄用戶和白名單設置):
permission.js文件下配置(permission文件最好和main文件在同一目錄下創(chuàng)建)
import router from './router'
import { getToken } from '@/common/TokenStore'
const whiteList = ['/login', '/register'] // 白名單登錄注冊界面無需驗證Token是否登錄直接放行
// 全局導航守衛(wèi)beforeEach
router.beforeEach((to, from, next) => {
// 白名單中路由直接放行
if (whiteList.indexOf(to.path) !== -1) {
next()
return
}
// 判斷需要登錄身份認證的路由
const token = getToken() // 獲取token
if (token) {
next()
} else {
next(`/login`) // 如果登錄不存在,重定向到登錄界面
}
})main.js文件下引入即可
import './permission' // 引入即可
案例2中使用(設置Tokne失效實現(xiàn)攔截,Tokne失效就導航會登錄界面重新登錄,未失效就不執(zhí)行操作)
login.vue(登錄組件登錄成功后保存Token和保存獲取Token的當前時間戳在本地)
methods: {
// 登錄
handleLogin() {
this.$axios.post('/api/Login',{
username: this.loginForm.username, // 用戶名
password: this.loginForm.password // 密碼
}).then(res => {
if(res.data.code != 0) return this.$message.error(res.data.message) // code 不等于0,返回失敗的結果,(這的判斷參數(shù)是根據(jù)后端返回的數(shù)據(jù)進行的,不是固定的)
if(res.data.code == 0){
this.$message.success('登錄成功')
// 存儲token開始時間
window.localStorage.setItem('tokenStartTime',new Date().getTime())
// 存儲token
window.localStorage.setItem('token',res.data.data.token)
this.$router.push('/home/ks')
}else {
this.$message.error('登錄失敗')
}
})
}
}permission.js(將保存的Token獲取時間和當前時間進行一個差值的比較,如果小于我們設定的Token失效時間,就證明登錄沒有過期可繼續(xù)訪問,如果大于就登錄過期Token失效需要重新登錄獲取。)
// 導入element提示語的組件可以去element-ui查看用法,這是按需引入的
import {
Message
} from 'element-ui'
// 添加請求攔截器
// 攔截器的第二部分,第一部分在main.js里面
router.beforeEach((to, from, next) => {
// 獲取存儲localStorage的token
let token = window.localStorage.getItem('token')
// 獲取存儲token的開始時間
const tokenStartTime = window.localStorage.getItem('tokenStartTime')
// 后臺給出的token有效時間為一天,這個是后端給的時間以后端為準
const timeOver = 86400000
// 獲取當前時間
let date = new Date().getTime()
// 當前時間減去獲取Token的時間如果大于說明是token過期了
if(date - tokenStartTime > timeOver) {
token = null // Token過期賦值為null
}
// 如果token過期了
if (!token) {
if (to.path == '/login') return next()
// 注意要import element的Message組件
Message.error("登錄狀態(tài)過期,請重新登錄")
return next('/login')
// 如果token沒有過期,又是選擇了登錄頁面就直接重定向到首頁,不需要重新輸入賬戶密碼
} else if (to.path == '/login') {
return next('/home/ks')
}
next()
})
export default router全局后置守衛(wèi)(afterEach)
router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})組件內守衛(wèi)(相當于給組件增加生命周期)
beforeRouteEnter 進入組件之前
beforeRouterEnter(to,from,next){}beforeRouteUpdate 組件被復用時調用
beforeRouterUpdate(to,from,next){}beforeRouteLeave 離開組件時調用
beforeRouteLeave(to,from,next){}
訪問外部鏈接
vue內部跳轉可以通過vue-router中的this.$router.push()和rout-link 來實現(xiàn),這里在說一下想要訪問外部鏈接的方法
1.window.location.href = url(不新開一個頁面,直接在當前頁面跳轉)
methods:{
onSkip(){
window.location.
}
}
2.window.open(“url”, “_blank”)(打開一個新頁面跳轉)
methods:{
onSkip(){
window.open("https://xxx.xxx.xxx/", "_blank");
}
}
3.手動創(chuàng)建a標簽,然后默認點擊
var a = document.createElement("a");
a.setAttribute("href", "www.baidu.com");
a.setAttribute("target", "_blank");
a.click();
到此這篇關于Vue路由應用詳細講解的文章就介紹到這了,更多相關Vue路由內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
前端vue+elementUI如何實現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關于vue+elementUI如何實現(xiàn)記住密碼功能的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
解決vue中監(jiān)聽input只能輸入數(shù)字及英文或者其他情況的問題
今天小編就為大家分享一篇解決vue中監(jiān)聽input只能輸入數(shù)字及英文或者其他情況的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
vue如何實現(xiàn)動態(tài)改變地址欄的參數(shù)值
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)改變地址欄的參數(shù)值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
vue實現(xiàn)element上傳多張圖片瀏覽刪除功能
這篇文章主要介紹了vue實現(xiàn)element上傳多張圖片瀏覽刪除功能,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10

