vue路由跳转部分的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">index</router-link>
<router-link to="/list">list</router-link>
<router-view></router-view>
{{flag}}
</div>
</body>
<script>
var index={
data:function(){
return{
name:"JayChou"
}
},
// beforeRouteEnter:function(to,from,next){
// setTimeout(function(){
// next(function(vm){
// vm.name=JayChou
// });
// },2000)
// },
beforeRouteLeave:function(to,from,next){
console.log("update");
next();
},
template:"<h1>{{name}}</h1>"
}
var list={
template:"<h1>list</h1>"
}
var app=new Vue({
el:"#app",
data:{
flag:false
},
created:function(){
this.flag=true;
this.$router.beforeEach(function(to,from,next){
// console.log("beforeEach");
next();
this.flag=true
}.bind(this));
},
router:new VueRouter({
routes:[
{
path:"/",
component:index
},
{
path:"/list",
component:list
}
]
})
})
</script>
</html>
网友评论