query (查询) 和 params (参数) 两者都是在 vue 路由中传递参数
query 用 path 属性引入,params 用 name 属性引入
query 传递参数和接收参数:
// 传参
this.$router.push({
path: '/userList',
query: {
id: id
}
})
// 接收参数
this.$route.query.id
传递参数使用 this.$router,接收参数使用 this.$route
$router 是 VueRouter 实例,$route 是当前 router 跳转的对象
导航到不同 url 使用 this.$router 的(push、go、replace)方法去切换路由
params 传递参数和接收参数
//传参:
this.$router.push({
name:'/userList'
params: {
id: id
}
})
//接收参数:
this.$route.params.id
<div id="app">
<h1>Hello App!</h1>
<div>
<!-- 使用 router-link 组件来导航 -->
<!-- 通过传入 `to` 属性指定链接 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- tag 属性可以自定义标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</div>
<router-view></router-view>
</div>
当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active
返回上一级页面
this.$router.go(-1)
案例:表格中修改页面跳转(模拟)
<template>
<section>
<el-table :data="tableData">
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-edit" @click="handleModify(scope.$index, scope.row, $event)">修改</el-button>
<el-button @click="handleDelete(scope.$index, scope.row, $event)">删除</el-button>
</template>
</el-table-column>
</el-table>
</section>
</template>
<script lang="ts">
export default {
methods: {
// 表格行修改页面
handleModify(index: any, row: { appId: any }) {
this.$router.push({
path: '/addSystem',
query: {
appId: row.appId
}
})
}
}
}
</script>
// 跳转后的页面
<script lang="ts">
export default {
created() {
this.getSystemInfo()
},
methods: {
getSystemInfo() {
businessService.getInfoById({appId: this.$route.query.appId}).then(res => {
this.systemValidateForm = res.data
})
}
}
}
</script>
VueRouter 官方文档 https://router.vuejs.org/zh/