- <!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>
首页内容
- <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>
来源: http://www.bubuko.com/infodetail-3296944.html