<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 记得先导包 -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<!-- Vue的作用域 -->
<div id="box">
<ul>
<li>
<router-link to="/home">首页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
<li>
<router-link to="/hot">热点</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<!-- 自定义组件模板 -->
<!-- 首页 -->
<template id="home">
<div>
<h3>首页</h3>
</div>
</template>
<!-- 新闻,定义二级路由 -->
<template id="news">
<div>
<h3>新闻</h3>
<!-- 二级路由的路径必须有一级路由原路径再+自身的路径 -->
<router-link to="/news/file">新闻文件</router-link>
<router-link to="/news/msg">新闻说明</router-link>
<!-- 二级路由显示的地方 -->
<router-view></router-view>
</div>
</template>
<!-- 热点 -->
<template id="hot">
<div>
<h3>热点</h3>
</div>
</template>
<script>
//绑定组件模板
var Home=Vue.extend({template:"#home"});
var News=Vue.extend({template:"#news"});
var Hot=Vue.extend({template:"#hot"});
/*把组件模板和地址对应起来*/
var routes=[
{
path:"/home",
component:Home
}, //home
{
path:'/news',
component:News,
//配置二级路由(层层嵌套)
children:[
//第一个二级路由file页面(注意：二级路由的path不能有"/")
{path:"file",
component:{
template:"<div>新闻文件详情页哦</div>"
}
},
//二级路由第二个地址(注意：二级路由的path不能有"/")
{
path:"msg",
component:{
template:"<div>新闻说明页二级路由哦</div>"
}
}
]
}, //news
{
path:'/hot',
component:Hot
}
];
var router=new VueRouter({
routes:routes
});
var vm=new Vue({
el:"#box",
router:router
});
</script>
</body>
</html>this.$router.push('/home');