vue页面跳转

页面跳转

html:
表格中点击指标管理按钮跳转到指标管理页面去

<a-table
      :columns="columns"
      :data-source="searchForm.tableData"
      :pagination="pagination"
      @change="handleTableChange"
      :loading="tableLoading"
      rowKey="id"
      style="padding-right: 10px"
    >
      <template #index="{ index }">{{ index + 1 }}</template>
      <template #action="{ record }">
        <a href="javascript:void(0)" @click="toManagementPage(record)"
          >指标管理</a
        >
        &nbsp;&nbsp;
        <a href="javascript:void(0)" @click="editList(record)">编辑模板</a>
        &nbsp;&nbsp;
        <a href="javascript:void(0)" @click="removeList(record)">删除</a>
      </template>
</a-table>

js中：

import {
    useRouter
} from 'vue-router';
setup() {
    //页面跳转,query里面传递参数，此时把id和name传过去了
	const router = useRouter();
	function toManagementPage(record) {
	    router.push({
	        name: 'EvaluateContent',
	        query: {
	            id: record.id,
	            name: record.name
	        }
	    })
	}
	 return {
	            toManagementPage, //跳转到体系内容页面
	 }
}

接收参数

指标管理页面接收参数：

import {
    useRouter
} from "vue-router";
setup() {
        const router = useRouter();
        let id= ref("");
        id.value = router.currentRoute.value.query.id；
        console.log(router.currentRoute.value.query.id)
        let titleName = ref("");
        titleName.value = router.currentRoute.value.query.name；
        console.log(router.currentRoute.value.query.name)
}