vue router示例

作者: zhanggongzi | 来源:发表于2018-09-20 16:55 被阅读0次

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta author="zhanggongzi">
<title>vue router demo</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.14/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-router/2.5.0/vue-router.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
body,html{
width: 100%;height: 100%;
}
#app{
margin: 0 auto;height: 100%;width: 100%;
}
#menu{
position: relative;
width: 160px;
height: 100%;
float: left;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(150,150,150,.4);
}
.menu-box{
position: absolute;
left: 0;
top: 0;
padding: 10px;
width: 140px;
}
#right-warp{
position: absolute;
left: 160px;
top: 0;
height: 100%;
padding-left: 10px;
overflow: hidden;
min-width: 864px;
}
.menu-box a{
display: block;
margin-bottom: -1px;
padding: 10px 15px;
color: #555;
text-decoration: none;
font-size: 14px;
border: 1px solid #ddd;
cursor: pointer;
}
.menu-box a:not(.active):hover{
background-color: #f9f9f9;
}
.active{
background-color: #ff8400;
color: #fff!important;
border-color: #ff8400!important;
}
</style>
</head>
<body>
<div id="app">
<div id="menu">
<nav-menu></nav-menu>
</div>
<div id="right-warp">

<router-view></router-view>
</div>
</div>
<script type="text/x-template" id="menutemp">
<div class="menu-box">
<a href="#menu1" v-bind:class="{active : link('menu1')}">页面1</a>
<a href="#menu2" v-bind:class="{active : link('menu2')}">页面2</a>
<a href="#menu3" v-bind:class="{active : link('menu3')}">页面3</a>
<a href="#menu4" v-bind:class="{active : link('menu4')}">页面4</a>
<a href="#menu5" v-bind:class="{active : link('menu5')}">页面5</a>
</div>
</script>
<script type="text/javascript">
//1.路由指向的页面组件
var Page1 = { template: '<div>Page1</div>' };
var Page2 = { template: '<div>Page2</div>' };
var Page31 = { template: '<div>hello,you want to konw me?please go page4.</div>' };
var Page3 = { template: '<div>{{ $route.params}}</div>' }; var Page4 = { template: '<div v-on:click="to">带着信息去第三页</div>',methods:{to:function(){ var name = 'angel'; location.href = '#/menu3/'+name+'/18'; }}}; var Page5 = { template: '<div>id:{{id}}</div>',props:['id'] }; //3.实例化路由 var router = new VueRouter({ //2.路由配置 routes:[ {path:'',component:Page1}, {path:'/menu1',component:Page1}, {path:'/menu2',component:Page2}, {path:'/menu3',component:Page31}, {path:'/menu3/:name/:age',component:Page3,name:'menu3'}, {path:'/menu4',component:Page4}, {path:'/menu5',component:Page5,props:{id:'123'}} ] }); //子组件-菜单 var menu = { template:'#menutemp', data:function(){ return { isActive:false } }, mounted:function(){ var route = this.$ route.path;
},
methods:{
link:function(val){
var active = this. $route.path.indexOf(val) >= 0; if(this.$ route.path == "/" ){
active = true;
}
return active;
}
}
}
//4.根实例
var app = new Vue({
el:'#app',
components:{
'nav-menu':menu
},
watch:{
'$route':function(to,from){
console.log(to);
}
},
//通过 router 配置参数注入路由
//从而让整个应用都有路由功能
router
})
</script>

</body>
</html>

vue router示例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读