您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
导航完成之前获取（路由生命周期）
发布时间：2020-04-13 21:11:45编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript" src="axios.js"></script>
<script>
Vue.use(VueRouter)
var User = {
data() {
return {
user: '',
error: null,
timer:null,
num:0,
msg:'', //输入框中输入的内容
msg1:'',//页面中展示的数据
confir:true
}
},
template: `
<div>
<div>{{num}}</div>
<input type="text" v-model = 'msg' />
<p>{{msg1}}</p>
<button @click='save'>保存</button>
<div v-if="error" class = 'error'>
{{error}}
</div>
<div class='user' v-if = 'user'>
<h2>{{user}}</h2>
</div>
</div>
`,
methods:{
setDatas(user){
this.user = user;
},
setError(err){
this.err = err;
},
save(){
this.msg1 = this.msg;
this.msg = '';
this.confir = true;
}
},
created(){
this.timer = setInterval(()=>{
console.log(this.num)
this.num +=1;
},1000)
},
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
console.log(to);
axios.get(`http://127.0.0.1:8888/user/${to.params.id}`)
.then(res=>{
next(vm=>vm.setDatas(res.data));
})
.catch(err=>{
next(vm => vm.setError(err))
})
},
beforeRouteUpdate(to, from, next) {
console.log(to)
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
this.user = null;
this.$axios.get(`http://127.0.0.1:8888/user/${to.params.id}`)
.then(res=>{
this.setDatas(res.data);
next();
})
.catch(err=>{
this.setError(err);
next();
})
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
clearInterval(this.timer);
console.log('离开了');
if (this.confir == true && this.msg) {
//证明用户输入了内容 需要提示用户 保存重要信息
this.confir= confirm('请保存重要信息'); //用户点击了取消按钮 返回值为false
next(false);
}else if(this.confir == false){
alert('请保存次信息后退出');
next(false);
}else{
next();//放行路由
}
}
}
//我是测试组件
var Test = {
template: `
<div>我是测试组件</div>
`
}
// 路由的配置
var router = new VueRouter({
routes: [{
path: '/user/:id',
name: 'user',
component: User,
}, {
path: '/test',
name: 'test',
component: Test
}]
});
//入口组件
var App = {
template: `
<div>
<router-link :to = "{name:'test'}">测试</router-link>
<router-link :to = "{name:'user',params:{id:1}}">我的用户1</router-link>
<router-link :to = "{name:'user',params:{id:2}}">我的用户2</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的导航守卫
相关文章
-
无相关信息