vue2路由跳转点击这里
分为2种方法
通过 router.push{
path:'跳转路径',
query{
传入参数
}
}
然后通过route.query来进行接收
<template>
<div class="main">
<el-button
style="width: 100px; margin: 0 40%"
type="primary"
@click="btnnext"
>登录</el-button>
</div>
</template>
<script lang='ts'>
import { reactive, toRefs,onMounted,} from "vue";
import { useRouter,useRoute} from 'vue-router';//要引入路由
export default {
name: "",
setup() {
let router = useRouter(),route = useRoute();
const data = reactive({
btnnext(){
router.push({
//name: 'Home',//这个query的话使用path再次刷新会页面空白最好用name
path:'/',
query: {
mallCode: "M000989",
},
})
},
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
<style scoped>
}
</style>
<template>
<div class="main">
<div class="header">{{num}}</div>
</div>
</template>
<script lang="ts">
import {reactive,toRefs} from 'vue';
import { useRouter,useRoute} from 'vue-router';
// router是全局路由对象,route是当前路由对象
export default({
name: 'Home',
setup(){
let route = useRoute();
const data = reactive({
num:route.query.mallCode,
});
const refData = toRefs(data);
return {
...refData,
};
}
});
</script>
<style lang="less" scoped>
.main{
width: 100%;
height: 100vh;
.header{
color: red;
}
}
</style>
<template>
<div class="main">
<el-button
style="width: 100px; margin: 0 40%"
type="primary"
@click="btnnext"
>登录</el-button>
</div>
</template>
<script lang='ts'>
import { reactive, toRefs,onMounted,} from "vue";
import { useRouter,useRoute} from 'vue-router';//要引入路由
export default {
name: "",
setup() {
let router = useRouter(),route = useRoute();
const data = reactive({
btnnext(){
router.push({
name: 'Home',//这个是路由的name
params: {
mallCode: "M000989",
},
})
},
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
<style scoped>
}
</style>
<template>
<div class="main">
<div class="header">{{num}}</div>
</div>
</template>
<script lang="ts">
import {reactive,toRefs} from 'vue';
import { useRouter,useRoute} from 'vue-router';
// router是全局路由对象,route是当前路由对象
export default({
name: 'Home',
setup(){
let route = useRoute();
const data = reactive({
num:route.params.mallCode
});
const refData = toRefs(data);
return {
...refData,
};
}
});
</script>
<style lang="less" scoped>
.main{
width: 100%;
height: 100vh;
.header{
color: red;
}
}
</style>