<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套路由</title>
</head>
<body>
<div id="app">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<!-- 组件只能有一个根元素，要包装在div中 -->
<template id="home">
<div>
<h3>首页</h3>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>
<!-- 路由匹配组件渲染显示处 -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>新闻</div>
</template>
<template id="login">
<div>登录界面</div>
</template>
<template id="reg">
<div>注册界面</div>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//1、定义路由组件
const Home = {template:"#home"};
const News = {template:"#news"};
const Login = {template:"#login"};
const Reg = {template:"#reg"};
//2、定义路由
const routes = [
{path:'/',redirect:'/home'},//重定向
{
path:'/home',
component:Home,
children:[
{path:'/home/login',component:Login},
{path:'/home/reg',component:Reg},
]
},
{path:'/news',component:News}
]
//3、创建路由实例，然后传‘routes’配置
const router = new VueRouter({
routes, //缩写<==>routes:routes
})
/*4. 创建和挂载根实例。
记得要通过 router 配置参数注入路由，
从而让整个应用都有路由功能*/
const app = new Vue({
router
}).$mount("#app");
</script>
</body>
</html>
转自原文链接：http://www.jb51.net/article/106326.htm
