当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue多层嵌套路由实例分析

vue多层嵌套路由实例分析

2019年07月23日  | 移动技术网IT编程  | 我要评论

精索静脉曲张图片,furarchi论坛,qq宠物网名

本文实例讲述了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>

效果图：

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网