vue页面跳转 路径传参方式和meta传参

 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>