动态路由

路由动态传参

方法一

步骤1：在<router-link>进行传参

<router-link tag="li" :to="{name:'路由的名字'
,parmas:{id:item.filmId,name:item.filmName}} " v-for="(item, index) in items" 
:key="index"></router-link>

分析：格式是定义一个对象，传路由的名称name和参数parmas

注意：参数里面的内容就是我们自定义的

:to={name:'路由的名字',parmas:{id:item.filmId,name:item.filmName}}

步骤二： 在路由中进行配置

 routes: [{
                // path: "/movie",
                path: "/movie/:id/:name",
                name: "movie",
                component: movie
            },

分析： :id和:name表示的是我们在<router-link>定义的id和name

注意：他们之间用/分开，并且都带上:

步骤三：在有需求的页面中进行获取参数

  mounted() {
        this.$route.parmas.id
    },

注意区分跳转路由

  this.$router.push('/home/homeContent')

方法二

通过方法把参数传过去

我们一编区域列表跳转到区域编辑为例

步骤1： 使用一个edit函数，这个函数我们是可以定义的

 <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope)"></el-button>

分析：函数中的scope参数是组件 <el-table>为我们定义好的，用这个参数可以获取到重要的参数如下：

首先scope返回的是一个对象

$index: 4 //它的值是我们点击数据表里的下标值
展示的是行里的数据
row：{
    areaId: "5da17e5c17b54d0068b83006"
    cityId: "5d9eda6217b54d0068a40bce"
    cityName: "5d9ee2a1c05a800073cc1a08"
    name: "asasqqq
}

步骤二：定义该方法，用来传参

    edit(scope) {
      //    let areaId = this.cityData.areaId
      console.log("数据", scope);
      let areaId = scope.row.areaId;
      // console.log("areaId",areaId)
      console.log("areaId", areaId);
      this.$router.push(`/area/edit/${areaId}`);
      console.log("111", scope);
    },

分析：用到的关键语法是

  //获取行的参数，比如是我们这里要获取的，areaId
let areaId = scope.row.areaId;
//使用push()可也指定要跳转到路由
   this.$router.push(`/area/edit/${areaId}`);

步骤3：配置路由

   {
      hidden: true,
      meta: {
      title: "区域编辑"
             },
           path: "edit/:areaId",
           component: () =>
          import ('@/page/area/children/edit')
    }

分析：通过path: "edit/:areaId",来进行动态路由传参

步骤4：获取我们的动态路由穿过来的值

 this.areaId=this.$route.params.areaId //获取传过来的参数值

方法三

通过<router-link></router-link>进行传参

步骤1 ：在<router-link>使用路由跳转到指定的页面

<router-link :to="`/city/edit/${scope.row.cityId}`">编辑</router-link> 

步骤2：配置路由

    {
         hidden: true,
         meta: {
         title: "区域编辑"
               },
          path: "edit/:areaId",
          component: () =>
          import ('@/page/area/children/edit')
     }

步骤3：获取我们的动态路由穿过来的值

 this.areaId=this.$route.params.areaId //获取传过来的参数值