通过watch实现路由监听
watch:{
$route(newRoute,oldRoute)
{
console.log(newRoute);
console.log(oldRoute);
}
}
导航守卫
<!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(){
//发送ajax请求,请求成功回来了
let token={username:this.username,password:this.password,priviledge:'admin'};
//cookie,locastorage（本地磁盘）,sessionstorage(窗口)
localStorage.setItem("token",token);
}
}
}
//2.定义路由映射关系
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.定义导航卫士
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.如果已经登陆过了,直接进入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>
网友评论