VUE的动态路由

最新推荐文章于 2024-09-12 19:34:30 发布

Rechust-E=mc²

最新推荐文章于 2024-09-12 19:34:30 发布

阅读量241

点赞数

分类专栏： VUE前端文章标签： npm vue.js

本文链接：https://blog.csdn.net/zhenlin4110/article/details/105687234

版权

VUE前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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
  }