极客观点
项目管理
HarmonyOS
1、vue-route 验证钩子函数执行顺序出错，界面显示不完全，报错信息是：
2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css">
<style>
body {
font-family: "Lato","Hiragino Sans GB", "Helvetica Neue", "Micrsoft YaHei", sans-serif;
background-color: #f7f8f9;
}
ul {
margin-top: 10px;
}
p {
margin-top: 10px;
margin-bottom: 10px;
}
.well{
max-height: 400px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-xs-10">
<p>example</p>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<router-link class="list-group-item" to="/home" active-class="active">Home</router-link>
<router-link class="list-group-item" to="/about" active-class="active">About</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-2">
<div class="well" v-html="msg">
</div>
</div>
</div>
</div>
<template id="home">
<div>
<div><h1>Home</h1><p>{{msg}}</p></div>
<div>
<ul class="nav nav-tabs">
<li :class="path == '/home/news' ? 'active': ''">
<router-link to="/home/news">News</router-link>
</li>
<li :class="path == '/home/news' ? 'active': ''">
<router-link to="/home/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<template id="news">
<div>
<ul>
<li> <router-link to="/home/news/detail/01" >new 01</router-link>
</li>
<li> <router-link to="/home/news/detail/02">new 02</router-link>
</li>
<li> <router-link to="/home/news/detail/03">new 03</router-link>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</template>
<template id="newsdetail">
<div>
News Detail - {{$route.params.id}} ......
</div>
</template>
<template id="message">
<ul>
<li>message 01</li>
<li>message 02</li>
<li>message 03</li>
</ul>
</template>
<template id="about">
<div><h1>about</h1><p>hahaha</p></div>
</template>
<script src="../src/js/vue.js"></script>
<script src="../src/js/vue-router.js"></script>
<script>
var well=new Vue({
el:'.well',
data:{
msg:'',
color:'#f00',
},
methods:{
setColor:function () {
this.color='#'+parseInt(Math.random()*256).toString(16)
+parseInt(Math.random()*256).toString(16)
+parseInt(Math.random()*256).toString(16)
},
setColoredMessage:function (msg) {
this.msg+='<p style="color:'+this.color+'">'+msg+'</p>';
},
setTitle:function (title) {
this.msg+='<h2 style="color:#333">'+title+'</h2>';
}
}
});
function RouteHelper(name) {
var route = {
canReuse: function(transition) {
well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse')
return true
},
canActivate: function(transition) {
well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate')
transition.next()
},
activate: function(transition) {
well.setColoredMessage('执行组件' + name + '的钩子函数:activate')
transition.next()
},
canDeactivate: function(transition) {
well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate')
transition.next()
},
deactivate: function(transition) {
well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate')
transition.next()
},
data: function(transition) {
well.setColoredMessage('执行组件' + name + '的钩子函数:data')
transition.next()
}
}
return route;
}
//创建组件构造器
var home=Vue.extend({
template:'#home',
data:function () {
return {
msg:'Hello,vue',
path:''
}
},
route: RouteHelper('home')
});
var news=Vue.extend({
template:'#news',
route: RouteHelper('news')
});
var NewsDetail = Vue.extend({
template: '#newsdetail'
});
var message=Vue.extend({
template:'#message',
route: RouteHelper('message')
});
var about=Vue.extend({
template:'#about',
route: RouteHelper('about')
});
//创建路由器
//创建路由映射
var router = new VueRouter({
routes: [
{ path: '/home',
component: home,
children:[
{
path:'/home/news',
component: news,
children:[
{
path: '/home/news/detail/:id',
component: NewsDetail },
]
},
{path:'/home/message',component: message},
]
},
{ path: '/about', component: about },
{ path: '/',redirect: '/home'}
]
});
router.beforeEach(function(transition) {
well.setColor()
well.setTitle('跳转路径<span class="text-danger">[from = ' + transition.from.path + '], [to = ' + transition.to.path + ']</span>')
well.setColoredMessage('执行router的全局函数:beforeEach')
transition.next()
})
router.afterEach(function(transition) {
well.setColoredMessage('执行router的全局函数:afterEach')
})
//启动路由
new Vue({
el:"#app",
router:router,
});
</script>
</body>
</html>