<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/dist/vue.js"></script>
<script type="text/javascript" src="../vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
Vue.use(VueRouter);
var Home = {
template:`<div>進入首頁</div>`
};
var Blog = {
template:`
<div>
<span @click="clickHander">進入博客</span>
<br />
<router-link :to="{name:'music',params:{id:'blogMusic'}}">音樂</router-link>
<router-link :to="{name:'video',params:{id:'blogVideo'}}">視頻</router-link>
<router-link :to="{name:'article',params:{id:'blogArticle'}}">文章</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>`,
methods:{
clickHander(e){
e.target.style.color = 'red';
}
}
};
var Login = {
data(){
return{
name:'',
pwd:''
}
},
template:`
<div>
<input type="text" id="name" v-model="name" />
<input type="password" id="pwd" v-model="pwd" />
<input type="button" value="登錄" @click="clickLogin" />
</div>`,
methods: {
clickLogin(){
localStorage.setItem("User",{name:this.name,pwd:this.pwd});
this.$router.push({
name:'blog'
});
}
}
};
var Logout = {
template:`<div>退出登錄</div>`
};
var BlogList = {
data(){
return{
msg:''
}
},
template:`<div>{{msg}}</div>`,
create(){
//this.msg = '';
console.log(1);
},
watch:{
'$route'(to,from){
console.log(to);
console.log(from);
this.msg = to.params.id;
}
}
};
var router = new VueRouter({
routes:[
{
path:'/',
redirect:'/home'
},
{
path: '/home',
name:'home',
component:Home
},
{
path:'/blog',
name:'blog',
component:Blog,
children:[
{
path:'/blog/music:id',
name:'music',
component:BlogList
},
{
path:'/blog/video:id',
name:'video',
component:BlogList
},
{
path:'/blog/article:id',
name:'article',
component:BlogList
}
],
meta:{
login:true
}
},
{
path:'/login',
name:'login',
component:Login
},
{
path:'/logout',
name:'logout',
component:Logout
}
]
});
var App = {
template: `
<div>
<router-link to="/home">首頁</router-link>
<router-link to="/blog">博客</router-link>
<router-link to="/login">登錄</router-link>
<router-link to="/logout">登出</router-link>
<router-view></router-view>
</div>
`
};
router.beforeEach((to,from,next)=>{
if(localStorage.getItem("User")){
next();
}else{
console.log(to.meta.login);
if(to.meta.login){
next({
path:'/login'
});
}
}
next();
});
new Vue({
el:'#app',
components:{
App:App
},
template:`<App />`,
router:router
});
</script>
</html>
