vue新增路由与页面跳转

router/index.vue

{
  path: '/order',
  component: Layout,
  name: 'optimize',
  hidden: true,
  redirect: '/order',
  children: [{
    path: 'optimizeDetail/:orderId/:id',
    component: (resolve) => require(['@/views/manufacture/order/optimizeDetail'], resolve),
    name: '优化单详情',
    meta: { title: '优化单详情' },

  }]
},

跳转

<template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="() => { $router.push({ path: `/order/optimizeDetail/${orderId}/${scope.row.id}` }) }"
            icon="el-icon-tickets"
            >详情</el-button
          >
        </template>

接收参数

export default {
  name: "detail",
  components: { BreadcrumbSub },
  data() {
    return {
      orderId: this.$route.params.orderId,
      id: this.$route.params.id,

 或者跳转用：

this.$router.push({ path: "/system/notice", query: { id: id } });

this.$route.query.id

 

 

 

或者可以封装下路由

router/modules/order.js

// 订单路由
import Layout from '@/layout'

export const orderRoutes = {
  path: "/order",
  component: Layout,
  hidden: true,
  redirect: 'noredirect',
  children: [{
    path: 'confirm/:id',
    component: (resolve) => require(['@/views/order/neworder/confirm'], resolve),
    name: '新订单确认',
    meta: { title: '新订单确认' }
  }]
}

router/index.js

import { orderRoutes } from './modules/order'

export const constantRoutes = [
***
,
  // 订单
  orderRoutes
]