本文轉(zhuǎn)自輕輕簡(jiǎn)記
http://www.qingqingjianji.com/
<!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')}">頁(yè)面1</a>
<a href="#menu2" v-bind:class="{active : link('menu2')}">頁(yè)面2</a>
<a href="#menu3" v-bind:class="{active : link('menu3')}">頁(yè)面3</a>
<a href="#menu4" v-bind:class="{active : link('menu4')}">頁(yè)面4</a>
<a href="#menu5" v-bind:class="{active : link('menu5')}">頁(yè)面5</a>
</div>
</script>
<script type="text/javascript">
//1.路由指向的頁(yè)面組件
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.path;
},
methods:{
link:function(val){
var active = this.route.path == "/" ){
active = true;
}
return active;
}
}
}
//4.根實(shí)例
var app = new Vue({
el:'#app',
components:{
'nav-menu':menu
},
watch:{
'$route':function(to,from){
console.log(to);
}
},
//通過(guò) router 配置參數(shù)注入路由
//從而讓整個(gè)應(yīng)用都有路由功能
router
})
</script>
</body>
</html>
