關(guān)于路由
在router.js中引入vue和vue-router
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
路由模式
前端路由就是一個(gè)前端不同頁面的狀態(tài)管理器,可以不向后臺(tái)發(fā)送請(qǐng)求而直接通過前端技術(shù)實(shí)現(xiàn)多個(gè)頁面的效果。angularjs中的ui-router,vue中的vue-router,以及react的react-router均是對(duì)這種功能的具體實(shí)現(xiàn)遥金。
- hash模式：vue-router中默認(rèn)使用的是hash模式恶座，這樣子瀏覽器的url上會(huì)出現(xiàn)#號(hào)：localhost:8080/#/
這種模式可以在window上監(jiān)聽這個(gè)事件：onhashchange,因?yàn)閔ash發(fā)生變化的url都會(huì)被瀏覽器記錄下來您机，所以瀏覽器的前進(jìn)后退鍵都可以是用加酵，這時(shí)候?yàn)g覽器是沒有請(qǐng)求服務(wù)器的因痛。
window.onhashchange = function(event){
console.log(event.oldUrl, event.newUrl);
}
- history模式：history模式是指使用HTML5的historyAPI實(shí)現(xiàn)客戶端路由的模式饮醇，onhashchange只能改變#后買你的url毕源，而history可以切換跟修改浪漠。
1.切換歷史狀態(tài)（go、back霎褐、forward）
history.go(-2);
history.back();
history.forward();
2.修改歷史狀態(tài)
history.pushState(data[,title][,url]);//向歷史記錄中追加一條記錄
history.replaceState(data[,title][,url]);//替換當(dāng)前頁在歷史記錄中的信息址愿。
history.state;//是一個(gè)屬性，可以得到當(dāng)前頁的state信息冻璃。
window.onpopstate;//是一個(gè)事件响谓，在點(diǎn)擊瀏覽器后退按鈕或js調(diào)用forward()损合、back()、go()時(shí)觸發(fā)娘纷。監(jiān)聽函數(shù)中可傳入一個(gè)event對(duì)象嫁审，event.state即為通過pushState()或replaceState()方法傳入的data參數(shù)
定義路由
- 3種路由方式
1、懶加載
var router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'login',
component: resolve => require(['./pages/login.vue'], resolve),
},
{
path: '/register',
name: 'register',
component: resolve => require(['./pages/register.vue'], resolve),
},
})
2赖晶、
routes: [
{
path:'/transfer/:id?',
name:'transfer',
component:()=>import('@/components/riches/transfer')律适，
meta:{requireAuth:true}
},
]
參數(shù)后面加?代表可傳可不傳的參數(shù)
3、普通方式
routes: [
{path: '/home ',name: 'home ',component: home ,meta: {title: 'home',requireAuth:true}},
{path: '/about ',name: 'about ',component: about ,meta: {title: '關(guān)于',requireAuth:true}},
]
- 嵌套路由
routes: [{
path: '/',
component: () => import( /* webpackChunkName: "home" */ './pages/home.vue'),
children: [{
path: "",
alias: "homepage",//別名
component: () => import( /* webpackChunkName: "home" */ './pages/homepage.vue'),
meta: {
group: "homepage",
title: "首頁",
}
}]
}]
路由跳轉(zhuǎn)
- router-link跳轉(zhuǎn)
<router-link to="home">首頁</router-link>
- this.$router.push()
// 路徑
this.$router.push("/home");
// 路由名字
this.$router.push({
name: 'home',// 用params時(shí)只能用name引入
params:{
name:'id'
}
})
用params時(shí)讀取參數(shù)：this.$router.params.id遏插，在地址欄上看不到請(qǐng)求參數(shù)擦耀，頁面刷新時(shí)有可能丟失請(qǐng)求數(shù)據(jù)
- this.$router.replace()
this.$router.replace({
name: 'home',// 用replace時(shí)可以用name或者path引入
query:{
name:'id'
}
})
用query時(shí)讀取參數(shù)：this.$router.query.id，在地址欄可以看到請(qǐng)求參數(shù)
路由守衛(wèi)
三個(gè)參數(shù)：to（將要去的路由）,from（出發(fā)的路由）,next（執(zhí)行下一步）
- 全局守衛(wèi)：
1涩堤、router.beforeEach((to,from,next)=>{})
2眷蜓、router.afterEach((to,from)=>{})
// 比如寫在main.js中
router.beforeEach((to,from,next)=>{
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert('請(qǐng)登錄');
next('/login');
}
})
- 組件內(nèi)守衛(wèi)：
1、beforeRouteEnter:(to,from,next)=>{//不可以訪問this}
2胎围、beforeRouteUpdate:(to,from,next)=>{//可以訪問this}
3吁系、beforeRouteLeave:(to,from,next)=>{//可以訪問this}
export default {
data(){
return{
name:"Arya"
}
},
beforeRouteEnter:(to,from,next)=>{
next(vm=>{
// 如果要訪問this ,必須通過 next(vm=>{})訪問,因?yàn)榻M件此時(shí)沒有創(chuàng)建，所以沒有this
alert(vm.name+',歡迎登錄')
})
}
}
- 路由獨(dú)享的守衛(wèi)：beforeEnter:(to,from,next)=>{}
var router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/home',
name: 'home',
component: resolve => require(['./pages/home.vue'], resolve),
beforeEnter: (to, from, next) => {
let id = window.localStorage.getItem("id")
if (id) {
next()
} else {
next({ name: "login" })
}
},
}]
})
