vue3.0路由跳转问题

292 阅读1分钟
// router.js 配置
/**
 * 方式一
 * */
// url带参数的路由配置
let router = {
    path: '/commandInfo/businessDataManager/eventManager/eventManagerDetail',
    name: 'eventManagerDetail',
    component: () => import('@/views/command-info/data-type/Event-manager/Event-manager-detail.vue'),
    meta: {
        title: '事件详情',
        returnPage: 'eventManager',
    }
}

// 点击进入详情,参数在url地址上,刷新页面数据不丢失
const detailFunc = async (record: any) => {
    router.push({
        path: '/commandInfo/businessDataManager/eventManager/eventManagerDetail',
        query: {
            id: record.id,
            specialId: record.specialId,
        }
    })
}
// 获取路由参数
let {id} = route.query
// 上述方法,好处是刷新页面路由参数不丢失,因为参数是写在url上面的



/**
 * 方式二
 * */
 // 路由配置同上
 // 跳转方式
 const detailFunc = async (record: any) => {
    router.push({
        name: '/commandInfo/businessDataManager/eventManager/eventManagerDetail',
        params: {
            id: record.id,
            specialId: record.specialId,
        }
    })
}

// 获取路由参数
let {id} = route.params
// 上述方法刷新页面路由数据丢失