vue 路由 及 跳轉傳遞參數的總結

博客地址：https://ainyi.com/4

 

vue-router

• vue-router 是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。
• 傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是應該是路徑之間的切換，也就是組件的切換

1. 是路由和頁面(組件)對應

 

2. 通過router-link進行跳轉

<router-link 
    :to="{
        path: 'yourPath', 
        params: { 
            id: id, 
            dataObj: data
        },
        query: {
            id: id, 
            dataObj: data
        }
    }">
</router-link>

• 這里涉及到三個參數

path -> 是要跳轉的路由路徑(推薦換成 name 值，name: pathName ，命名路由，兩者都可以進行路由導航)
params -> 是要傳送的參數，參數可以直接 key:value 形式傳遞（類似post） 
query -> 是通過 url 來傳遞參數的同樣是 key:value 形式傳遞（類似get） 
接收參數： 
this.$route.query.id 
this.$route.params.id 

關於path路徑加不加 / 的問題，加了/就是在根路徑下跳轉，不加就是在當前路徑后面跳轉，子頁面，使用命名路由就不用管加不加 / 的問題了

 

3. 復用組件時，想對路由參數的變化作出響應的話，可以 watch（監測變化） $route 對象

watch:{
    //監聽相同路由下參數變化的時候，從而實現異步刷新
    '$route'(to,from){
        //做一些路由變化的響應
        this.loading = true;//打開加載動畫
        this.getCateShop();//重新獲取數據
    },
},

 

4. 全局鈎子，在main.js配置，可用作用戶攔截

//在進入路由之前， 每一次都會執行此方法  全局鈎子
router.beforeEach(function(to,from,next){
  //設置網頁標題
  document.title = to.meta.title;
  //檢查是否已登錄
  let userObj = JSON.parse(sessionStorage.getItem('user'));
  if(userObj){
    //執行方法，將用戶名設置進全局參數  vuex
    //提交mutation的Types.SETUSERNAME方法
    //第二個參數是攜帶的參數
    //main.js使用vuex的提交方法，不需要this.$store.commit()，直接就store.commit()
    store.commit(Types.SETUSERNAME,userObj.username);
  }else{
    //如果未登錄，想要進入admin目錄，則自動跳回首頁
    if(to.path.indexOf('admin') != -1){
    //   alert("進了");
      router.push({name:'home'});
    }
  }
  next(); //繼續往下走
});

 

 

博客地址：https://ainyi.com/4