vueナビゲーションガードの運用方法
2607 ワード
各ガードメソッドは、3つのパラメータを受信します:to:アクセスするターゲットルーティングオブジェクトfrom:現在のナビゲーションが離れるルーティングnext::ロー
<script src="../node_modules/vue/dist/vue.js"/>
<script src="../node_modules/vue-router/dist/vue-router.js"/>
<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)"> </a>
<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>
</code></pre>
</div>
</div>
</div>
</div>