通過watch實現(xiàn)路由監(jiān)聽
watch:{
$route(newRoute,oldRoute)
{
console.log(newRoute);
console.log(oldRoute);
}
}
導(dǎo)航守衛(wèi)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">首頁</router-link>
<router-link to="/news">新聞</router-link>
<router-link to="/music">音樂</router-link>
<router-link to="/login">登錄</router-link>
<router-view></router-view>
</div>
<template id="login">
<div>
<input type="text" v-model="username" />
<input type="text" v-model="password" />
<button type="button" @click="login">登錄</button>
</div>
</template>
<script>
//1.定義路由組件
const home={template:'<div>首頁</div>'}
const news={template:'<div>新聞</div>'}
const music={template:'<div>音樂</div>'}
const login={template:'#login',
data(){
return{
username:'',
password:''
}
},
methods:{
login(){
//發(fā)送ajax請求,請求成功回來了
let token={username:this.username,password:this.password,priviledge:'admin'};
//cookie,locastorage（本地磁盤）,sessionstorage(窗口)
localStorage.setItem("token",token);
}
}
}
//2.定義路由映射關(guān)系
const routes=[
{
path:"/",name:'default',redirect:'/home'
},{
path:"/home",name:'home',component:home
},{
path:"/news",name:'news',component:news
},{
path:"/music",name:'music',component:music
},{
path:"/login",name:'login',component:login
}]
//3.定義路由實例
const router=new VueRouter({
routes
})
//4.定義導(dǎo)航衛(wèi)士
router.beforeEach((to,from,next)=>{
console.log(to.name);
let islogin=false;
var token=localStorage.getItem("token");
if(token!=null){
islogin=true;
}
//1.定義需要訪問的列表
let arr=['news','music'];
if(arr.indexOf(to.name)>=0){
if(!islogin){
router.push('/login');
location.reload();
}
}
//2.如果已經(jīng)登陸過了,直接進入home頁面
if(to.name=='login'){
if(islogin){
router.push('/home');
location.reload();
}
}
next();
})
//5.放在vue實例上
let vm=new Vue({
el:"#app",
data:{
},
router
});
</script>
</body>
</html>
