## 若依跳转路由

实现方法

在若依框架中实现页面跳转  
要求：点击按钮可以跳转到子页面，子页面不在导航栏中显示

本次示例为在手机信息页面点击跳转按钮到手机对应的系统页面，并传递查询参数手机id和手机name（name要回显到顶部搜索栏）。

实例如下

1. 配置路由。 

父子页面设置路由属性，文件路径为ruoyi-ui\src\router\index.js。父组件path随便写，子组件path也随便写吧，component的import导路径（跟引用一样的，后面加个vue文件的名字，我是这样的），name别名，其他不用管。

{
    path: '/brush/phone',
    component: Layout,
    hidden: true,
    permissions: ['brush:os:list'],
    children: [
      {
        path: '/brush/os',
        component: () => import('@/views/brush/os/index'),
        name: 'OsByPhoneId',
        meta: { title: '机型对应系统'}
      }
    ]
  }

```

2. 跳转函数

父页面按钮要写一个jumpOs跳转函数（click事件），将要传的字段添加进去，$router.push方法里name为上面设置好的子页面路由的name属性，query来储存传递的参数。
``` js

<el-button
    size="mini"
    type="text"
    icon="el-icon-position"
    @click="jumpOS(scope.row)"
    v-hasPermi="['brush:os:list']"
>系统</el-button>
          
/** 跳转到此机型的系统列表 */
 jumpOS(row){
      const phoneIdForOs = row.phoneId;
      const phoneNameForOS = row.phoneName;
      this.$router.push({ name:"OsByPhoneId",query: {phoneIdForOs,phoneNameForOS}});
}

```

3. 在子页面creat方法写几行代码，就是在这个方法里将传过来的参数赋值给子页面的查询参数，this.getList()是我自己的方法不用管，你们调用你们自己的查询方法（一般都会调）就行了。
``` js
 

created() {
    this.queryParams.phoneId = this.$route.query.phoneIdForOs;
    this.queryParams.brushPhone.phoneName = this.$route.query.phoneNameForOS;
    console.log("本机型id为："+this.queryParams.phoneId+"，本机型名称为："+this.queryParams.brushPhone.phoneName);
    this.getList();  
  },

```

大佬们有错误给我指出啊，我也蒙圈的很，照着别人的教程cv过来改的，目前是这样理解的。