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
  }