<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套</title> </head> <body> <div id="app"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户中心</router-link> </div> <div> <router-view></router-view> </div> </div> </body> </html>
<script src="vue.js"></script> <script src="vue-router.js"></script> <script> // 定义组件 var Home = { template:"<h3>主页内容</h3>" } var User = { template:` <div> <h3>用户中心</h3> <ul> <li><router-link to="user/userinfo">查看个人信息</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` } var UserDetail = { template:"<h4>个人信息</h4>" } // 配置路由 const routes = [ { path:"/home", component:Home }, { path:"/user", component:User, children:[ // 配置子路由 { path:"userinfo",component:UserDetail } ] }, { path:"*", redirect:"/home" } // 重定向让页面加载即显示Home ] // 生成路由实例 const router = new VueRouter({ routes }) // 挂载到vue实例上 new Vue({ el:"#app", router }) </script>