vue页面跳转 路径传参方式和meta传参
vue跳转页面传参获取参数
·
vue2
参数三个形式
获取当前路由对象
console.log(this.$route);
获取当前路由
console.log(this.$route.path);
1.query传参
获取: this.$route.query.size(参数名)
2. params传参
路由上面写接收参数的变量 /:id
获取: this.$route.params.id(参数名)
3.meta参数
在router页面的路由配置里面写
{
path: "index",
name: "index",
component: () => import('@/views/Index/Index.vue'),
props: true,
meta: { title: "首页" },
},
获取:this.$route.meta.title(参数名)
修改: 只能在路由监听里面修改才生效
watch监听路由跳转
watch: {
$route: {
immediate: true,
handler(val, oldval) {
// console.log(val, oldval);
val.meta.keepAlive = true
let arr: any = sessionStorage.getItem("crumbs")
// console.log("获取面包屑列表", JSON.parse(arr));
this.crumbs = JSON.parse(arr)
// console.log("面包屑",this.crumbs);
}
},
},
路由跳转监听函数里面
router.beforeEach((to, from, next) => {
to.meta.title = "新值"
});
vue3
{
path: "/mtteacher/:id",
name: "mtteacher",
component: () => import("@/views/MT/teacher/index.vue"),
props: true,
},
<script setup>
import { useRoute } from "vue-router";
onBeforeMount(()=>{
const route = useRoute();
console.log(route.params, route.params.id); // 地址栏参数
console.log("参数",route.params.id); // 这里是获取id 是因为在router里面定义的参数名字是id
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)