Vue 頁面跳轉

https://www.jianshu.com/p/c699c4d197de  vue 跳轉頁面並傳遞參數

https://blog.csdn.net/weixin_40297452/article/details/90704936

<router-link :to="'/index/'+id" tag="li"> //(id是參數) 加tag 就解析成了可以點擊的li
<router-link to="/" enent="mouseover">變成了鼠標移入切換</router-link>
//query 推薦
<router-link :to="{path:'/CateInner',query: {id: item.id}}">詳情</router-link>

//params 跳轉相同頁面數據不刷新
<router-link :to="{name:'CateInner',params:{id: item.goodsid}}">詳情</router-link>

注意：router-link中鏈接如果是‘/'開始就是從根路由開始，如果開始不帶‘/'，則從當前路由開始。

const router = new VueRouter({
  mode:'history',//默認是hash模式
  linkActiveClass:'menvscode-active',//導航選中樣式
  scrollBehavior(to,from,savePosition){ // 在點擊瀏覽器的“前進/後退”，或者切換導航的時候觸發。
    console.log(to) // to：要進入的目標路由對象，到哪裏去
    console.log(from) // from：離開的路由對象，哪裏來
    console.log(savePosition) // savePosition：會記錄滾動條的座標，點擊前進/後退的時候記錄值{x:?,y:?}
    if(savePosition) {
      return savePosition;
    }else{
      return {x:0,y:0}
    }
  },
  routes:[]
注意: savePosition 這個功能只在 HTML5 history 模式下可用。

$router方式跳轉

//推薦query的跳轉方式
this.$router.push({
　　path: '/detail',
　　query: {
　　　　name: 'admin',
　　　　code: 10021
　　}
});

跳轉地址 ====> /detail?name=admin&code=10021

取值 ====> this.$route.query.name

//params的跳轉方式 跳轉相同頁面數據不刷新bug
this.$router.push({
　　name: 'detail',
　　params: {
　　　　id: 10021
　　}
});

跳轉地址 ====> /detail/10021

取值 ====> this.$route.params.id

頁面接收參數
created(){
      let uni = this.$route.query.unique;
       this.name =  this.$route.query.id;
  },

注意！！！
傳參跳轉頁面時，query不需要再路由上配參數就能在新的頁面獲取到參數，
params也可以不用配，但是params不在路由配參數的話，當用戶刷新當前頁面的時候，參數就會消失。

也就是說使用params不在路由配參數跳轉，只有第一次進入頁面參數有效，刷新頁面參數就會消失。

 

params  傳遞多個參數

傳遞多個參數時，params可以配合路由中的name 來使用，也可以和傳遞一個參數那樣 直接在路由路徑上拼接多個參數

對應組件使用路由的方法如下：/:id和/:age不能省略，且不能改名字

對應目標組件，獲取路由上傳過來的參數：

注意：是this.route 而不是 this.router

查詢參數(query)

使用查詢參數的方式，在路由配置中，path就不用再拼接參數

在父組件中，直接將需要傳遞的參數放在query裏，如下

在子組件中使用this.route.query 接收參數

ps：使用params傳遞參數，url上只會出現數據，不會出現具體字段

     而使用查詢參數query的方式，url上會出現具體的字段，比較不安全