vue之router-link页面跳转及传参
文章目录
- vue之router-link页面跳转及传参
-
- 根据路由的路径跳转及传参(query)
- 根据路由的名称跳转及传参(params)
- 根据store传参
vue之router-link页面跳转及传参
要在使用
根据路由的路径跳转及传参(query)
路由路径
{
path: '/destination', //路由路径
component: () => import('@/views/destination'), //页面位置
hidden: true //默认隐藏
}
传递参数
<template>
<div>
<router-link :to="{ path: '/destination', query: { id: 123, name: 'example' } }">
Go to Destination
router-link>
div>
template>
上面的示例中，/destination 是目标路由的路径，query 属性被用来传递参数。点击链接后，URL 将类似于 /destination?id=123&name=example。
接收参数
<template>
<div>
<p>ID: {{ $route.query.id }}p>
<p>Name: {{ $route.query.name }}p>
div>
template>
<script>
export default {
mounted() {
console.log(this.$route.query.id); // 访问 query 中的参数
console.log(this.$route.query.name);
}
};
script>
根据路由的名称跳转及传参(params)
路由路径
{
path: '/destination', //路由路径
name: 'destination', //路由名称
component: () => import('@/views/destination'), //页面位置
hidden: true //默认隐藏
}
传递参数
<template>
<div>
<router-link :to="{ name: 'destination', params: { id: 123, name: 'example' } }">
Go to Destination
router-link>
div>
template>
这个示例中，使用了路由的名称 destination，并通过 params 属性传递了参数。注意，这种方式需要在路由配置中定义了对应名称的路由，并且参数会被作为 URL 的一部分，如 /destination/123/example。
接收参数
<template>
<div>
<p>ID: {{ $route.params.id }}p>
<p>Name: {{ $route.params.name }}p>
div>
template>
<script>
export default {
mounted() {
console.log(this.$route.params.id); // 访问 params 中的参数
console.log(this.$route.params.name);
}
};
script>
根据store传参
根据store传参就是页面跳转的时候将参数放入store中
在vue中，store用于管理状态、共享数据以及在各个组件之间管理外部状态，store是vuex应用的核心，也就是一个容器，包含着应用中大部分的状态，更改store中的状态唯一方法是提交mutation。关于具体使用方法可参考若依前后端分离中的前端代码（照葫芦画瓢）。
若依前后端分离:https://gitee.com/y_project/RuoYi-Vue
路由路径
{
path: '/destination', //路由路径
component: () => import('@/views/destination'), //页面位置
hidden: true //默认隐藏
}
传递参数
<template>
<div>
<router-link :to="'/destination'">
<span @click="setDestinationParams">Go to Destinationspan>
router-link>
div>
template>
<script>
export default {
methods: {
setDestinationParams() {
var params = { id: 123, name: 'example' }
this.$store.dispatch("destination/setDestination", params);
},
}
};
script>
参数放入store中
编写destination.js放在src/store/modules中
const state = {
params: {}
}
const mutations = {
//放入参数
SET_DESTINATION: (state, params) => {
state.params=params
},
//清楚参数中的某个属性值
REMOVE_DESTINATION: (state, key) => {
delete state.params[key];
},
//清除参数
CLEAN_DESTINATION: (state) => {
state.params = {}
}
}
//调用方法
const actions = {
// 设置临时数据
setDestination({ commit }, data) {
commit('SET_DESTINATION', data)
},
// 删除临时数据的属性
removeDestination({ commit }, key) {
commit('REMOVE_DESTINATION', key)
},
// 清空临时数据
cleanDestination({ commit }) {
commit('CLEAN_DESTINATION')
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
为了方便调用，将参数引入getters.js
const getters = {
......
destination: state => state.destination.params,
......
}
export default getters
将getters.js放入index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import destination from './modules/destination'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
destination
},
getters
})
export default store
接收参数
<template>
<div>
<p>ID: {{ id }}p>
<p>Name: {{ name }}p>
div>
template>
<script>
export default {
data() {
return {
id:null,
name:"",
}
},
mounted() {
console.log(this.$store.getters.destination.id);
console.log(this.$store.getters.destination.name);
this.id=this.$store.getters.destination.id;
this.name=this.$store.getters.destination.name;
},
//离开此页面时触发（刷新页面或者进入其他页面，若是不想清除，注释此方法即可）
beforeRouteLeave(to, from, next) {
//页面切换时清除临时跳转参数
this.$store.dispatch("destination/cleanDestination");
next();
// 这里需要elementui的支持，如果使用其他界面组件自行替换即可
// this.$confirm("正在离开本页面，本页面内所有未保存数据都会丢失", "警告", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// })
// .then(() => {
// // 正常跳转
// next();
// })
// .catch(() => {
// // 如果取消跳转地址栏会变化，这时保持地址栏不变
// window.history.go(1);
// });
},
};
script>