vue多层嵌套路由实例分析

2019-11-19 11:58:38

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue多层嵌套路由。分享给大家供大家参考，具体如下：

多层嵌套：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="bower_components/vue/dist/vue.js"></script>  <script src="bower_components/vue-router/dist/vue-router.js"></script>  <style>    .v-link-active{      font-size: 20px;      color: #f60;    }  </style></head><body>  <div id="box">    <ul>      <li>        <a v-link="{path:'/home'}">主页</a>      </li>      <li>        <a v-link="{path:'/news'}">新闻</a>      </li>    </ul>    <div>      <router-view></router-view>    </div>  </div>  <template id="home">    <h3>我是主页</h3>    <div>      <a v-link="{path:'/home/login'}">登录</a>      <a v-link="{path:'/home/reg'}">注册</a>    </div>    <div>      <router-view></router-view>    </div>  </template>  <template id="news">    <h3>我是新闻</h3>  </template>  <script>    //1. 准备一个根组件    var App=Vue.extend();    //2. Home News组件都准备    var Home=Vue.extend({      template:'#home'    });    var News=Vue.extend({      template:'#news'    });    //3. 准备路由    var router=new VueRouter();    //4. 关联    router.map({      'home':{        component:Home,        subRoutes:{          'login':{            component:{              template:'<strong>我是登录信息</strong>'            }          },          'reg':{            component:{              template:'<strong>我是注册信息</strong>'            }          }        }      },      'news':{        component:News      }    });    //5. 启动路由    router.start(App,'#box');    //6. 跳转    router.redirect({      '/':'home'    });  </script></body></html>

效果图：

路由其他信息:

/detail/:id/age/:age
{{$route.params | json}}    -> 当前参数
{{$route.path}}    -> 当前路径
{{$route.query | json}}    -> 数据

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="bower_components/vue/dist/vue.js"></script>  <script src="bower_components/vue-router/dist/vue-router.js"></script>  <style>    .v-link-active{      font-size: 20px;      color: #f60;    }  </style></head><body>  <div id="box">    <ul>      <li>        <a v-link="{path:'/home'}">主页</a>      </li>      <li>        <a v-link="{path:'/news'}">新闻</a>      </li>    </ul>    <div>      <router-view></router-view>    </div>  </div>  <template id="home">    <h3>我是主页</h3>    <div>      <a v-link="{path:'/home/login/zns'}">登录</a>      <a v-link="{path:'/home/reg/strive'}">注册</a>    </div>    <div>      <router-view></router-view>    </div>  </template>  <template id="news">    <h3>我是新闻</h3>    <div>      <a v-link="{path:'/news/detail/001'}">新闻001</a>      <a v-link="{path:'/news/detail/002'}">新闻002</a>    </div>    <router-view></router-view>  </template>  <template id="detail">    {{$route.params | json}}    <br>    {{$route.path}}    <br>    {{$route.query | json}}  </template>  <script>    //1. 准备一个根组件    var App=Vue.extend();    //2. Home News组件都准备    var Home=Vue.extend({      template:'#home'    });    var News=Vue.extend({      template:'#news'    });    var Detail=Vue.extend({      template:'#detail'    });    //3. 准备路由    var router=new VueRouter();    //4. 关联    router.map({      'home':{        component:Home,        subRoutes:{          'login/:name':{            component:{              template:'<strong>我是登录信息 {{$route.params | json}}</strong>'            }          },          'reg':{            component:{              template:'<strong>我是注册信息</strong>'            }          }        }      },      'news':{        component:News,        subRoutes:{          '/detail/:id':{            component:Detail          }        }      }    });    //5. 启动路由    router.start(App,'#box');    //6. 跳转    router.redirect({      '/':'home'    });  </script></body></html>

效果图：