vue router使用

vue router

好好學習，天天向下！

一、路由傳參

① 路由跳轉this.$router.push() 後面接路由地址
② 傳參name="+name+"&psw="+psw 第一個參數前用?拼接，後面的參數都用&連接

let name = joker;
let psw = 123;
this.$router.push("/abc?name="+name+"&psw="+psw);

二、獲取路由上傳的參數

①this.$route.query獲取路由上所傳參數的對象
② 是以鍵值對的形式獲取，直接.key,可以獲取到想要的參數

let routeList= this.$route.query

三、監聽路由（watch和computed，這裏只說第一種）

① 當路由發生變化時就執行一些指定的程序
Ⅰ、

watch: {
  $route: {
    handler: function(newval, oldVal){
      console.log(newval);
    },
    // 深度監聽
    deep: true
  }
}

Ⅱ、

watch: {
  '$route':'change'
},
methods: {
  change(){
    console.log(this.$route.path);
  }
}

四、導航守衛

① 對路由跳轉進行限制，通過if對下一路由進行規劃，決定路由到哪一地址
② 修改路由
注意： 此方法需在main.js中使用，全局使用

main.js

router.beforeEach((to, from, next) => {
  if ( NO || to.path === "/Home") {
    next()//滿足條件就正常的跳轉下一地址
  } else {
    next({
      path: "/Home"//不滿足就跳轉到指定的地址
    })
  }
})