VUE的动态路由

vue前端的动态路由实现：

1、首先在router中配置动态路由的路径：

  {
   path: 'nolist/:no',                                //相对路径
      component: () => import('@/views/nolist'),      //导入VIEWS的展示页面
      name: 'nolist',
      meta: { title: '动态路由', noCache: true },
      hidden: true
    },

2、触发动态路由的方式，这里选择在表格中，所传入的参数为表格的row.no，使用router-link指定路由的页面

 <el-table-column prop="no" label="编码" width=100px 
                             sortable="custom">
              <template slot-scope="{row}">
              <span v-if="viewDetail">       //当viewDetail为TRUE时触发
                <router-link :to="'/nolist/'+row.no" class="link-type">
                  {{ row.no }}
                </router-link>
              </span>
              </template>
              </el-table-column>

3、在路由页面中nolist/:no，创建一个create,用来实现初始化

created() {
    const ss = this.$route.params && this.$route.params.no
    this.selectFrom(ss)
  },
  
  
  selectFrom(ss){
   const res = selectFromInApi(ss)  //导向一个VUE的API方法selectFromInApi
  }