每個守衛方法接收三個參數：
to: 即將要進入的目標 路由對象
from:當前導航正要離開的路由
next:: 放行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">首頁</router-link>
<router-link to="/blog">我的博客</router-link>
<router-link to="/login" >登錄</router-link>
<a href="javascript:void(0)" @click="clearOut">退出</a>
<router-view></router-view>
</div>
<script>
//聲明組件
var Home={
template:`
<div>我是首頁</div>
`
}
var Blog={
template:`
<div>我是博客</div>
`
}
var Login={
data(){
return{
uname:'',
psw:''
}
},
template:`
<div>
<input type="text" v-model="uname"/>admin
<input type="text" v-model="psw"/>密碼
<input type="button" @click="handlerLogin" value="登錄">
</div>
`,
methods:{
handlerLogin(){
<!-- //保存用戶名和密碼 本地保存 -->
localStorage.setItem("username",{name:this.uname,psw:this.psw});
<!-- //編程式導航 -->
this.$router.push({
path:'/blog'
})
}
}
}
var router=new VueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/blog',
component:Blog,
<!-- 想在哪個組件做控制，跳轉之前做配置 -->
meta:{
//用戶訪問該組件是否需要登錄
auth:true
}
},
{
path:'/login',
component:Login
},
]
})
router.beforeEach((to,from,next)=>{
console.log(to,from);
if(to.meta.auth){
<!-- //判斷有沒有用戶名和密碼 -->
if(localStorage.getItem("username")){
<!-- //有用戶名說明已經登錄 -->
<!-- 放行 -->
next()
}else{
<!-- //沒有登錄，渲染登錄組件 -->
next({
path:"/login"
})
}
}else{
next()
}
})
//router掛載到實例上
new Vue({
el:"#app",
router,
methods:{
clearOut(){
localStorage.removeItem("username");
this.$router.push({
path:'/login'
})
}
}
})
</script>
</body>
</html>