方法一
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
li{
list-style: none;
display: inline-block;
margin: 20px 10px;
}
a{
text-decoration: none;
}
.show{
height: 200px;
width: 500px;
background-color: gold;
}
</style>
</head>
<body>
<div id="div">
<ul>
<!--路由跳转标签-->
<li><router-link to='/home'>home</router-link></li>
<li><router-link to='/news'>news </router-link></li>
<li><router-link to='/hot'>hot</router-link></li>
</ul>
<div class="show">
<!--路由占位展示标签-->
<router-view></router-view>
</div>
</div>
<template id="home">
<h1>首页</h1>
</template>
<template id="news">
<h1>新闻</h1>
</template>
<template id="hot">
<div>
<h1>热点</h1>
<router-link to='/hot/mv'>MV</router-link>
<router-link to='/hot/tv'>TV</router-link>
<router-view></router-view>
</div>
</template>
</body>
</html>
<script type="text/javascript">
// 生成并绑定路由模块
var Home = Vue.extend({
template: '#home'
});
var News = Vue.extend({
template: '#news'
});
var Hot = Vue.extend({
template: '#hot'
});
// 配置路径信息
var routes = [
// 一级路由
{path: '/home',component:Home},
{path: '/news',component:News},
// 二级路由
{path: '/hot',component:Hot,children:[
{path:'',component:{template:'<p>电影：战狼，战狼2，战狼3'}},//默认模板
{path:'mv',component:{template:'<p>电影：战狼，战狼2，战狼3'}},
{path:'tv',component:{template:'<p>电视剧：大秦帝国，大秦帝国2，大秦帝国3'}},
]},
];
// 创建路由对象
var router = new VueRouter({
routes:routes
});
// 添加路由配置项
var vm = new Vue({
el: '#div',
data:{
},
// 刷新页面跳转
beforeCreate:function(){
this.$router.push('/home');
},
router:router
})
// 刷新页面跳转
// router.push('/news');
</script>方法二
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
li{
list-style: none;
display: inline-block;
margin: 20px 10px;
}
a{
text-decoration: none;
}
.show{
height: 200px;
width: 300px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="div">
<ul>
<li><router-link to='/home'>home</router-link></li>
<li><router-link to='/news'>news </router-link></li>
<li><router-link to='/hot'>hot</router-link></li>
</ul>
<div class="show">
<router-view></router-view>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#div',
data:{
},
router:new VueRouter({
routes:[
{path:'/home',component:{template:'<h1>首页</h1>'}},
{path:'/news',component:{template:'<h1>新闻</h1>'}},
{path:'/hot',component:{template:'<h1>热点</h1>'}}
]
})
})
</script>