vue-route開發注意事項

一、router-link to 動態賦值

router-link組件的to屬性值有兩種寫法，字符串類型和對象類型

若是要動態傳值，好比放到for循環中，傳入for的index值，這時就必須使用對象形式，動態傳值

<router-link  :to="{path:'/old_data_details/params/'+item.id}"  > </router-link>

2、路由跳轉的三種方式，及返回上一級

　　1）<router-link to="keyframes">點擊驗證動畫效果 </router-link>

　　　　to屬性值能夠是路由字符串，也能夠使對象形式

　　2）this.$router.push({ path:’/user’})

this.$router.push({  
     path:'/select',   //跳轉的路徑
     query:{           //路由傳參時push和query搭配使用 
       id:this.id ,  
     }
})

　　3）this.$router.replace{path：‘/’ }  與push相似

　　返回上一級使用this.$router.go(-1) ,跳轉到指定路由this.$router.push('/home')

三、路由重定向（設置默認路由）

 

 四、vue監聽路由變化

　　1）經過watch函數（注意：必須在跟組件中，才能監聽到路由的變化）

// 監聽,當路由發生變化的時候執行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},
或者
// 監聽,當路由發生變化的時候執行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度觀察監聽
    deep: true
  }
},
或者
// 監聽,當路由發生變化的時候執行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

　　2)經過 vue-router 的鉤子函數 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

<script>
  export default {
    name: 'app',
    // 監聽,當路由發生變化的時候執行
    beforeRouteEnter (to, from, next) {
      // 在渲染該組件的對應路由被 confirm 前調用
      // 不！能！獲取組件實例 `this`
      // 由於當鉤子執行前，組件實例還沒被建立
    },
    beforeRouteUpdate (to, from, next) {
　　　　//beforeRouteUpdate守衛並不會在不一樣路由共用同一組件時觸發
　　　　//當從切換到時，會觸發。
　　　　//但若是從切換到時，並不會觸發。

 // 在當前路由改變，可是該組件被複用時調用，即同一路由下只有參數發生變化的狀況下能夠用此鉤子監聽到 // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
      // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
      // 能夠訪問組件實例 `this`
    },
    beforeRouteLeave (to, from, next) {
      // 導航離開該組件的對應路由時調用
      // 能夠訪問組件實例 `this`
    }
</script>/item/22/edit/item/11/editbeforeRouteUpdate/item/22/edit/item/createbeforeRouteUpdate

　　3）如上面提到的 <router-view :key="key"></router-view>

　　對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，頁面是否是刷新的，即hashChage函數是不會觸發的，這時，能夠給路由組件router-view添加 ：key=""屬性來阻止複用
　　而後動態參數的路由跳轉就是能夠刷新頁面了
　　Vue 爲你提供了一種方式來聲明「這兩個元素是徹底獨立的——不要複用它們」。只需添加一個具備惟一值的 key 屬性，這樣就能夠如願刷新數據了

<router-view :key="key"></router-view>
computed: {
  key() {
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  }
}

五、圖片 :src=" " 使用data裏面的url時出現404的狀況

這麼寫會出現404錯誤，圖片路徑不被webpack解析，直接展現爲src='./1.png'

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
  return {
    images:[{src:'./1.png'},{./2.png}]
  }
}

應該這麼寫，將圖片做爲模塊加載進來require

 data(){
    return {
      iconsData : [
        {
          pageName:'guohu',
          iconUrl:require('../assets/img/guohu.png'),
          iconName:'過戶',
          toUrl:this.handleUrlStr('guohu')
        },
        {
          pageName:'xiaohao',
          iconUrl:require('../assets/img/xiaohao.png'),
          iconName:'銷號及復裝',
          toUrl:this.handleUrlStr('xiaohao')
        }
     ]
    }
}

 六、vue路由守衛

//建立路由實例
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        isLogin:true    // 添加該字段，表示進入這個路由是須要登陸的
      }//路由元
    },{
      path:"/login",
      name:"login",
      component:Login
    }
  ]
})


// 路由守衛
router.beforeEach((to,from,next)=>{
        if(to.matched.some(res=>res.meta.isLogin)){//判斷是否須要登陸
            if (sessionStorage['username']) {
                next();
            }else{
                next({
                    path:"/login",
                    query:{
                        redirect:to.fullPath
                    }
                });
            }

        }else{
            next()
        }
    });

export default router;

to 表示將要跳轉到的組件 (目標組件)
console.log(from); //(源組件)
next();
next 是一個函數
next() 進入下一個組件的鉤子函數
next(false) 阻止跳轉 中斷導航
next("/login") 進入指定的組件的鉤子函數

注意：路由守衛處理了邏輯以後，必須調用next()函數，路由纔會向下執行

七、區分$router 對象和 $route對象

$router : 是路由操做對象，只寫對象 ，用來操做路由的行爲

$route : 路由信息對象，只讀對象，獲取當前路由的信息

 

 

 參考：https://blog.csdn.net/qq_42928918/article/details/88406257