您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
vue-router的导航守卫
发布时间：2020-04-13 21:08:35编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<!--引入axios库，一个类似promise的东西-->
<script type="text/javascript" src="axios.js"></script>
<script type="text/javascript">
// 导航完成后获取数据，这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。
var Index = {
template:`
<div>我是首页</div>
`
};
var Post = {
data(){
return {
loading:false,
error:null,
post:null
}
},
template:`
<div>
<div class = 'loading' v-if = 'loading'>
loading.....
</div>
<div v-if="error" class = 'error'>
{{error}}
</div>
<div class = 'content' v-if = 'post'>
<h2>{{post.title}}</h2>
<p>{{post.body}}</p>
</div>
</div>
`,
created(){
// 组件创建完成后获取数据
// 此时data已经被监听了
//为什么这里要调用一次fetchData,而watch也要调用一次，因为组件是有缓存的，这里未必会重复调用
this.fetchData();
},
watch:{
'$route':'fetchData'
},
methods:{
fetchData(){
this.error = null;
this.post = null;
this.loading = true;
this.$axios.get('http://127.0.0.1:8888/post')
.then(res=>{
this.loading = false;
console.log(res.data);
this.post = res.data;
})
.catch(err=>{
this.error = err.toString();
})
}
}
}
var router = new VueRouter({
routes:[
{
path:'/index',
name:'index',
component:Index
},
{
path:'/post',
name:'post',
component:Post
}
]
});
var App = {
template:`
<div>
<router-link :to = "{name:'index'}">首页</router-link>
<router-link :to = "{name:'post'}">我的博客</router-link>
<router-view></router-view>
</div>
`
};
Vue.prototype.$axios = axios;
new Vue({
el:"#app",
data:{
},
components:{
App
},
template:`<App />`,
router
});
</script>
</body>
</html>
<!--
,
-->
关键字词：vue,router,导航,守卫
下一篇：导航完成之前获取（路由生命周期）