JZTXT

路由跳转需要带参

发布时间 2023-09-22 09:54:56作者: 分页需带参

表格数据分页，分页数据刷新数据不丢失

分页时跳转

router.push({
    name: route.name,
    params: { page: currentPage.value },
    query: { search: search.value },
  });

其中route.name代表跳转的路径别名

params代表路由跳转所带的参数，需要在路由中配置

{
        path:'/baseManagement/user/:page?',
        name:'user',
        component:()=> import('@/views/baseManagement/user/index.vue'),
        meta: {
          title: "用户列表",
          showLink: true,
          icon:'ant-design:usergroup-add-outlined',
          roles:['admin','user']
        },
        children:[]
      },

路径后加 :page? 匹配0或多个参数

query代表查询的条件，不需要在路由中配置

http://localhost:8099/#/baseManagement/admin/2?search=%E6%B8%B8%E5%AE%A2

以 ?search=' ' 的形式

拿到l路由中参数的方式

import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

//拿到params
const params = route.params.page
//拿到query中的参数
const query = route.query.search