路由跳转的几种方式

router路由跳转

1、明文传参[query]:URL路径显示传递的参数

优势:页面刷新新参数不会丢失
劣势:参数公开

  • 传参方式

    • HTML跳转
      
    
    • JS跳转
    this.$router.push({
        name:"editDetail",
        query:{
            page:1,
            code:1111
        }
    })
    
  • 接收参数

    this.$route.query.page
    

2、密文传参[params]:URL路径不会显示传递的参数

优势:参数不显示
劣势:页面刷新参数丢失

  • 传参方式
    • HTML跳转
      
    
    • JS跳转
    this.$router.push({
        name:"editDetail",
        params:{
            page:1,
            code:1111
        }
    })
    
  • 接收参数
    this.$route.params.page
    

3、冒号的形式传参

优势:页面刷新后参数不会丢失
劣势:需要手动配置

  • 路由配置
    {
      path: "/editDetail/:id/:title",  //手动配置path
      name: "editDetail",
      hidden:true, 
      meta: {
        name: "信息分类"
      },
      component: () => import("../views/Info/editDetail.vue"),
    }
    
  • 传参方式
    root是vue3.0中的,相当于2.0中的this
    const editDetail = (data)=>{
      root.$router.push({
        path:`/editDetail/${data.id}/${data.title}`
      })
    }
    
  • 接收参数
    root.$route.params.id
    root.$route.params.title
    

4、vuex结合H5本地存储

优势:参数不显示
劣势:大材小用,解决第二种密文传参刷新后参数丢失的情况

  • 传参方式
    • store中
    /**
     * 已经存储了值,不刷新页面的话,值一直存在vuex
     * 刷新页面,数据丢失,但是可以从sessionStorage中取到值
     */
    const state = {
      id: "" || sessionStorage.getItem("infoId"),
      title: "" || sessionStorage.getItem("infoTitle")
    }
    //取到sessionStorage中缓存的值
    const getters = {
      infoId: state => state.id,
      infoTitle: state => state.title
    }
    const mutations = {
        SET_ID(state, value) {
            state.id = value;
            sessionStorage.setItem("infoId", value);
        },
        SET_TITLE(state, value) {
            state.title = value;
            sessionStorage.setItem("infoTitle", value);
        }
    
    }
    export default {
      namespaced: true,
      state,
      getters,
      mutations
    };
    
    vuex刷新后数据丢失,但是可以利用H5的本地存储
    • js
    root.$store.commit("editDetail/SET_ID",id)
    root.$store.commit("editDetail/SET_TITLE",title)
    //在跳转之前提前将数据存储起来
    root.$router.push({
          name: "editDetail",
          params: {
            id: data.id,
            title: data.title
          }
    });
    
  • 接收方式
    //代码会在这里又重新执行一遍,vuex中的数据就会丢失
    let id = root.$route.params.id ||root.$store.getters["editDetail/infoId"];
    let title = root.$route.params.title || root.$store.getters["editDetail/infoTitle"];
    
    store中的数据导出使用了命名空间

5、新窗口打开

优势:参数不显示
劣势:大材小用,解决第二种密文传参刷新后参数丢失的情况

  • HTML
    
      编辑详情
    
    
    注意:vue1不支持
  • JS
    let routerDate = root.$router.resolve({
      name: "editDetail",   
      query: {
        id: data.id,
        title: data.title
      },
    });
    window.open(routerDate.href,"_blank");
    

你可能感兴趣的:(路由跳转的几种方式)