Vue路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>嵌套路由</title> </head> <body> <div id="app"> </div> </body> </html> <script src="js/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script> Vue.use(VueRouter); // 声明组件路由 var Son1={ template:` <h1>我是子组件1</h1> ` }; var Son2={ template:` <h1>我是子组件2</h1> ` }; // 创建路由对象 var Home={ template:` <div> 首页内容 <br /> <router-link to='/home/son1'>组件1</router-link> <router-link to='/home/son2'>组件2</router-link> <router-view></router-view> </div> ` }; // 命名路由 var router=new VueRouter({ // 配置路由对 routes:[ // 路由匹配规则 { // 动态路由参数，以冒号开头 path:'/home', name:'home', // 响应组件 component:Home, // 路由嵌套 children:[ { //以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，
主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path。 path:'son1', component:Son1 }, { path:'son2', component:Son2 } ] } ] }); var App={ template:` <div> <!--router-link默认会被渲染成a标签，to默认会被渲染成href属性--> <router-link :to = "{name:'home'}">首页</router-link> <!--路由组件的出口--> <router-view></router-view> </div> ` }; new Vue({ el:'#app', template:`<App />`, router:router, components:{ App } }) </script>