vue-element-admin 框架 页面内跳转非左侧菜单栏页面

由于之前都是直接解析后台传入的页面，所以在想如果没有在菜单显示的页面该如何跳转。

于是在仔细看 原框架作者Panjiachen的源码之后发现了实现的方式，这里记录下来作为笔记

点击测试按钮的时候，跳转非左侧菜单的路由

//测试的时候用的静态路由数据，实际业务可制定需求让后台给你数据，以便进行权限控制

// src => router => index.js

export const  asyncRouterMap = [
....

{//设备管理
    path:'/p_device',
    component:Layout,
    name: 'p_device',
    alwaysShow : true,
    meta: {
      title: 'p_device',
      icon: 'device'
    },
    children: [
      
      {
        path: 'c_module',//型号管理  
        component: _import('p_device/c_module'),
        name: 'c_module',
        meta: {
          title: 'c_module'
        }
      },
      {                                        //需要跳转的页面，
        path: 'test/:id(\\d+)',                //路径及携带参数
        component: _import('p_device/test'),   
        name: 'EditArticle',
        //meta.activeMunu  激活时的菜单 
        meta: { title: 'Edit Article', noCache: true, activeMenu: '/p_device/c_module' },
        hidden: true   //是否显示在菜单
      },
      ...
      
    ]
  },

....
] 

模型管理页面的跳转按钮

     <el-table-column
            prop="opration"
            label="操作"
            width="160">
        <template slot-scope="scope">
          <router-link :to="'/p_device/test/'+scope.row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">
              测试
            </el-button>
          </router-link>
        </template>
      </el-table-column>

测试页面 /p_device/test.vue

<template>
    <div>

        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        
    </div>
</template>
<script>
export default {
    created(){
        console.log(this.$route.params)
    }
}
</script>

最终浏览器显示效果

 

完