router路由跳轉(zhuǎn)

1、明文傳參[query]:URL路徑會(huì)顯示傳遞的參數(shù)

優(yōu)勢(shì)：頁(yè)面刷新新參數(shù)不會(huì)丟失
劣勢(shì)：參數(shù)公開(kāi)

• 傳參方式

  • HTML跳轉(zhuǎn)

    <router-link :to="{name:'editDetail',query:{page:1,code:1111}}"></router-link>
  

  • JS跳轉(zhuǎn)

  this.$router.push({
      name:"editDetail",
      query:{
          page:1,
          code:1111
      }
  })
  

• 接收參數(shù)

  this.$route.query.page
  

2、密文傳參[params]:URL路徑不會(huì)顯示傳遞的參數(shù)

優(yōu)勢(shì)：參數(shù)不顯示
劣勢(shì)：頁(yè)面刷新參數(shù)丟失

• 傳參方式
  • HTML跳轉(zhuǎn)

    <router-link :to="{name:'editDetail',params:{page:1,code:1111}}"></router-link>
  

  • JS跳轉(zhuǎn)

  this.$router.push({
      name:"editDetail",
      params:{
          page:1,
          code:1111
      }
  })
  

• 接收參數(shù)

  this.$route.params.page
  

3、冒號(hào)的形式傳參

優(yōu)勢(shì)：頁(yè)面刷新后參數(shù)不會(huì)丟失
劣勢(shì)：需要手動(dòng)配置

• 路由配置

  {
    path: "/editDetail/:id/:title",  //手動(dòng)配置path
    name: "editDetail",
    hidden:true, 
    meta: {
      name: "信息分類(lèi)"
    },
    component: () => import("../views/Info/editDetail.vue"),
  }
  

• 傳參方式
  root是vue3.0中的，相當(dāng)于2.0中的this

  const editDetail = (data)=>{
    root.$router.push({
      path:`/editDetail/${data.id}/${data.title}`
    })
  }
  

• 接收參數(shù)

  root.$route.params.id
  root.$route.params.title
  

4、vuex結(jié)合H5本地存儲(chǔ)

優(yōu)勢(shì)：參數(shù)不顯示
劣勢(shì)：大材小用，解決第二種密文傳參刷新后參數(shù)丟失的情況

• 傳參方式
  • store中

  /**
   * 已經(jīng)存儲(chǔ)了值，不刷新頁(yè)面的話(huà)，值一直存在vuex
   * 刷新頁(yè)面，數(shù)據(jù)丟失，但是可以從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刷新后數(shù)據(jù)丟失，但是可以利用H5的本地存儲(chǔ)
  • js

  root.$store.commit("editDetail/SET_ID",id)
  root.$store.commit("editDetail/SET_TITLE",title)
  //在跳轉(zhuǎn)之前提前將數(shù)據(jù)存儲(chǔ)起來(lái)
  root.$router.push({
        name: "editDetail",
        params: {
          id: data.id,
          title: data.title
        }
  });
  

• 接收方式

  //代碼會(huì)在這里又重新執(zhí)行一遍,vuex中的數(shù)據(jù)就會(huì)丟失
  let id = root.$route.params.id ||root.$store.getters["editDetail/infoId"];
  let title = root.$route.params.title || root.$store.getters["editDetail/infoTitle"];
  

  store中的數(shù)據(jù)導(dǎo)出使用了命名空間

5、新窗口打開(kāi)

優(yōu)勢(shì)：參數(shù)不顯示
劣勢(shì)：大材小用，解決第二種密文傳參刷新后參數(shù)丟失的情況

• HTML

  <router-link target="_blank" :to="{name:'editDetail',params:{id:scope.row.id}}">
    <el-button size="mini" type="success">編輯詳情</el-button>
  </router-link>
  

  注意：vue1不支持
• JS

  let routerDate = root.$router.resolve({
    name: "editDetail",   
    query: {
      id: data.id,
      title: data.title
    },
  });
  window.open(routerDate.href,"_blank");