首頁可以控制導航跳轉，beforeEach，afterEach等，一般用於頁面title的修改。一些需要登錄才能調整頁面的重定向功能。
-
beforeEach主要有3個參數to，from，next。
-
to：route即將進入的目標路由對象。
-
from：route當前導航正要離開的路由。
-
next：function一定要調用該方法resolve這個鈎子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。
跳轉其他頁面
<router-link :to="{path: 'yourPath', params: { name: 'name', dataObj: data},query: {name: 'name', dataObj: data}}"></router-link>
1. path -> 是要跳轉的路由路徑,也可以是路由文件里面配置的 name 值,兩者都可以進行路由導航
2. params -> 是要傳送的參數,參數可以直接key:value形式傳遞
3. query -> 是通過 url 來傳遞參數的同樣是key:value形式傳遞
// 2,3兩點皆可傳遞
<template>
<button @click="sendParams">傳值</button>
</template>
<script>
export default {
name: '',
data () {
return {
msg: 'test message'
}
},
methods: {
sendParams () {
this.$router.push({
path: 'yourPath',
name: '要跳轉的路徑的 name,在 router 文件夾下的 index.js 文件內找',
params: {
name: 'name',
dataObj: this.msg
}
})
}
},
}
</script>
<style scoped></style>
<template>
<h3>msg</h3>
</template>
<script>
export default {
name: '',
data () {
return {
msg: ''
}
},
methods: {
getParams () {
// 取到路由帶過來的參數
let routerParams = this.$route.params.dataobj
// 將數據放在當前組件的數據內
this.msg = routerParams
}
},
watch: {
// 監測路由變化,只要變化了就調用獲取路由參數方法將數據存儲本組件即可
'$route': 'getParams'
}
}
</script>
<style scoped></style>
$route和$router的區別
$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鈎子函數等。