vue router 动态路由

vue router的动态路由

导航数据是后台读取的，用的前端工具是VSCode

App.vue里面加载数据

  // 引入组件
  import detail from '@/components/Detail.vue'

export default {
  name: 'App',
  data () {
      return {
        navList : null
        activeClass:-1
      }
  },
  components : {
    detail
  },
  mounted() {
    this.nav();
  },
  methods : {
    nav : function() {
      let self = this;
      self.myAjax.post( '/api/page/nav', param).then(function(resp) { //请求成功
        const resData = resp.data;
        self.navList = resData.systemInfoList;
      }).catch(function(err) { //请求失败
        console.log(err);
      })
    },
    loadListByNav ( event,systemId,index ) {
        let self = this;
        self.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
        this.param.systemId = systemId;
        //this.list();//根据导航传入的参数，重新更新列表数据
        if ( systemId == null ) {
          this.activeClass = -1; 
        }
        self.$router.push({
          path:'/nav/'+systemId,
          params: {
            systemId: systemId
          }
        })
      }
  }
}

注：查询出来的列表数据可以通过定义全局，store有空研究

APP里面引用了详情的组件，显示用：

<template>
  <div id="app">
    <div class="left-nav writ-back">
      <div class="side-nav-cont clearfix">
        <ul>
          <li @click="loadListByNav($event,null)">
            <i class="iconfont icon-fenlei"></i>All Classifiy
            <span>{{listCount}}</span>
          </li>
          <li  v-for="(na,index ) in navList"  @click="loadListByNav($event,na.systemId,index)" :key="index"  :class="activeClass  == index ? 'active':''" >{{na.systemName}} <span>{{na.count}}</span>
          </li>
        </ul>
    </div>
    </div>
    <div class="page-content">
      <form class="layui-form mt10 writ-back" action="" lay-filter="component-form-element">
        <div class="row main-panel-box">
          <!-- Travel management --> 
            <div class="col-xs-8 col-sm-8">
              <label class="layui-form-label">Title：</label>
              <div class="layui-input-block">
                <input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="col-xs-4 col-sm-4 text-left">
                <button type="submit" class="btn btn-primary">Search</button>
                <a href="##" class="iconfont icon-shezhi fr pt10"></a>
            </div>
          </div>
        </form>

        <div class="container-fluid writ-back mt10 pl10">
           <!-- 导航 -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#toDo" aria-controls="toDo" role="tab" data-toggle="tab">To do<span>{{todolistCount}}</span></a></li>
            <li role="presentation"><a href="#read" aria-controls="read" role="tab" data-toggle="tab">To read<span>{{readlistCount}}</span></a></li>
            <li role="presentation"><a href="#viewed" aria-controls="viewed" role="tab" data-toggle="tab">Viewed<span>30</span></a></li>
          </ul>
          <div class="tab-content">
            <!-- <router-view></router-view> -->
            <detail></detail>
          </div>        
          <div id="pageToolbar" class="text-center"></div>
          
        </div>
    </div>
  </div>
</template>

main.js里引用router,目录结构是src/router/index.js

// 引入路由
import router from './router' 

其中index.js的定义

const routes = [
    {
      path : '/',
      component : Detail,
      props : true
    },
    {
      name : 'all',
      path : '/',
      component : Detail,
      props : true
    },
    {
      path : '/nav/:systemId',
      component : Detail,
      props : true
    }
  ]

我用的是编程式的，是push，App.vue里面

<li @click="loadListByNav($event,'all')">
            <i class="iconfont icon-fenlei"></i>All Classifiy
            <span>30</span>
          </li>
          <li  v-for="(na,index ) in navList"  @click="loadListByNav($event,na.systemId)" :key="index">{{na.systemName}} 
            <span>{{na.count}}</span>
          </li>

另外一种方式是

</li><li  v-for="(na,index ) in navList"  :key="index">
            <router-link :to="{ path: '/nav/' + na.systemId }">{{na.systemName}} </router-link>
            <span>{{na.count}}</span>
          </li>

path拼接要传入的参数

loadListByNav方法里面的push就可以去掉了。

Detail.vue里面的取参：

<tbody>
                  <tr>
                    <td>{{this.$route.params.systemId}}</td>
                  </tr>
                </tbody>

父组件对子组件的传参，还有另一种方式

data () {
        return {
          toDetail:{
            userId : 'aa',
            type : 1,
            currentPage : 1,
            systemId : null,
            title : null,
            pageSize : 10,
            todoList:null
          }       
        }
    }

其中组件

<detail v-if="toDetail" :toDetail="toDetail"></detail>

子组件：

props:{
        // activeClass:Number
        toDetail:Object,
          default () {
              return {
                currentPage:1
              }
          }
      }

对象的取值：

{{this.toDetail.pageSize}}