vue-router动态路由（2）

html页面 

  <div id="app">
    <div class="nav">
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <ul>
        <li>
          <router-link to="/" exact>首页</router-link>
        </li>
        <li>
          <router-link to="/news">新闻动态</router-link>
        </li>
        <li>
          <router-link to="/user">用户</router-link>
          <ul>
            <li v-for="(item,index) in list">
              <router-link :to="{path:'/user/'+item.name+'/base?',query：{age:item.age,gender:item.gender}}">
                  {{item.name}}
             </router-link>
            </li>
            <ul>
        </li>
        </ul>
    </div>
    <div class="rightmin">
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  </div>

模板定义 

  <!--定义首页模板，方式一-->
  <script type="text/x-template" id="hometpl">
    <div>这是首页</div>
  </script>
  <!--用户信息模板，方式为二-->
  <template id="usertpl">
  <div>
    <h1>用户信息</h1>
    <h3>{{$route.params.name ==null ? "姓名":$route.params.name}}</h3>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>
  <!--用户详情模板-->
  <template id="basetpl">
<div>
  <table style="background:#eee;width:100%;" border="1">
    <tr>
      <td>姓名：</td>
      <td>{{$route.params.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>  {{$route.query.age}}</td>
    </tr>
    <tr>
      <td>性别</td>
      <td>{{$route.query.gender ==0 ? "男":"女"}}</td>
    </tr>
  </table>

</div>
</template>

路由配置 

<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
   //定义数组对象数据
    var listdata = [{  name: '李特成',age: 20,gender: 0},{name: '章帅',  age: 10,
                   gender: 1},{name: '刘能',age: 30,gender: 0}];

    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    const Home = {
      template: '#hometpl'
    }
    const news = {
      template: '<div>新闻</div>'
    }
    const user = {
      template: '<div>用户</div>'
    }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      {
        path: '/',
        component: Home
      },
      {
        path: '/news',
        component: news
      },
      {
        path: '/user',
        component: {
          template: '#usertpl',
        },
        children: [{
          path: ':name',
          component: {
            template: '<div><router-view></router-view></div>'
          },
          children: [{
            path: 'base',
            component: {
              template: '#basetpl'
            }
          }]
        }]

      }
    ]

    //创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes
    });
    //创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const vm = new Vue({
      el: '#app',
      data: {
        list: listdata
      },
      router,

    })
  </script>

 样式表

<style>
    *,html,body {padding: 0px;margin: 0px;}
    .nav {text-align: center;}
    .nav a {margin: 0px 10px;color: #000;line-height: 25px;}
    .nav {width: 20%;float: left;height: 500px;text-align: left;padding: 0px;margin: 0px;background: #eee;}
    .rightmin {padding: 10px;  float: right;width: 70%}
    .rightmin h1 {font-size: 16px;}
    .rightmin h3 {font-size: 15px;padding: 5px 0px;}
    .nav a.router-link-active {color: green;text-decoration: underline;}
  </style>

效果图