2-vue-router相關API

  • hash和history模式的設定

  mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    }
  ]
})

  • router-link

其實就是導航，根據(jù)to屬性去匹配對應的組件，然后渲染到正確位置。
如果用a標簽，頁面會發(fā)生跳轉(zhuǎn)。默認router-link會渲染成a標簽；

  • tag="要生成的標簽名"，頁面會生成指定的標簽；并且不需要自己監(jiān)聽事件，vue-router都自動監(jiān)聽;
   <router-link  :to="{path:'/home'}" tag="li">
    <i></i><span>home</span>
   </router-link>
  • to:要跳轉(zhuǎn)到的目標文件；可以用':to'，去動態(tài)綁定;
<router-link :to="index">home</router-link>
<!--對象形式-->
<router-link :to="{path:'/home'}">home</router-link>
export default {
  data(){
      return {
          index : '/home'
      }
  }
}
  • tag:設置生成指定的標簽
  <router-link :to="{path:'/home'}" tag="div">home</router-link>
  • linkActiveClass : 設置導航激活的class
new Router({
  mode:'history',
  linkActiveClass:'isActive',
  ]
})
  • active-class : 設置單獨的、獨有的自己的激活狀態(tài)顏色（比如每個導航激活顏色不同）
 <router-link to="/document" tag="li" active-class="activeClass">document</router-link>
  • event : 指定事件
<router-link :to="{path:'/home'}" event="mouseover" tag="li">home</router-link>
  • name : 為組件命名
    如果路徑很多，在每個router上都寫路徑，而且如果路徑嵌套復雜，就會一不小心就出錯，而且很麻煩，這個時候就可以給每個組件添加name屬性
<router-link   :to="{name:'study'}" >

  • 重定向

比如用戶輸入了一個錯誤的路徑，常見的就是給出一個404或者跳轉(zhuǎn)到首頁。

{
      path: '*',
      //直接渲染一個組件 component: noFound
      //重定向 : 直接定到指定的組件  redirect : '/home'
      //redirect : {path:'/home'}
      //利用組件上的name redirect:{name : 'document'}
      redirect:(to)=>{
        //to:目標路由對象，就是訪問的路徑的路由信息
        if(to.path === '/123'){
          return '/home'
        }else if(to.path === '/456'){
          return {path:'/document'}
        }

      }
    }

  • 別名 ： alias

比如，你在地址欄輸入了/index,希望這個地址渲染的是home，這個時候就可以在組件的配置上寫別名

routes: [
    {
      path: '/home',
      name: 'home',
      component: home,
      alias : '/index'
    }
]

  • exact：其他路徑被點亮的時候去掉根路徑的active

<router-link exact  to="/" >
routes: [
    {
      path: '/',
      component: home,
    }
]

  • 嵌套路由的使用(在父路由中切換)

圖示：


image.png

注意，如果路由中，有了子路由，就不要把name給父路由設置，直接設置子路由即可，否則瀏覽器會警告提示。

{
      path: '/about',
      //如果有默認子路由，父級就不要設置name了 name: 'about',
      component: about,
      children:[
        {
          //默認子路由
          path : '',
          name : study,
          component : study
        },
        {
          path : 'hobby',
          name : hobby,
          component : hobby
        },
        {
          path : 'work',
          name : work,
          component : work
        }
      ]
    }
  • 路徑設置：現(xiàn)在about下面有三個組件，如果現(xiàn)在想實現(xiàn)：進入一個子理由的時候，地址欄不顯示其父路由（about/work==>/work）,這時只需要在子路由path中加一個/（/的意思是相對根路由）
{
  path : '/hobby',
  name : 'hobby',
  component : hobby
 }

  • 命名視圖

image.png

概念：就是對router-view標簽起一個名字；
使用場景：當遇到同一個單頁面組件里，需要出現(xiàn)兩個或多個router-view時，就需要對標簽命名了；

命名方法：

  1. 通過name屬性起名
    <router-view name="slider"></router-view>

   new VueRouter({
      routes:[
      { 
        path:'/document',
        components:{
          default:document， //default為默認組件
          slider:slides
          //slider:寫的是標簽中的name值；
          //slides：寫的是slides這個名字的.vue文件，需要引入到頁面中
        }
     }
   ]

});

注意：是在對應的路由中添加；

  • 滾動行為：

瀏覽器滾動默認行為說明：當頁面滾動到一定位置后，手動刷新瀏覽器，會發(fā)現(xiàn)頁面依然在之前滾動位置，這是瀏覽器記錄滾動位置的默認行為；

需求：點擊瀏覽器的前進和后退的按照時，讓打開的頁面，保持在之前頁面滾動的位置；

步驟：

new VueRouter({
    scrollBehavior(to,from,savedPosition){//滾動行為，在點擊瀏覽器的前進后退或切換導航時，觸發(fā)
      //to:要進入的目標路由對象  (要去哪里)
      //from:離開的路由對象      (從哪里來)
      //savadPosition：記錄當前滾動位置滾動條的坐標，點擊前進后退時，坐標值   {x:0,y:0}  
      if(savePosition){
        return savePosition;  //這樣就可以定位到之前的位置啦
    }else{
        return {x:0,y:0}
    }
    }
});

  • 動態(tài)路徑：

不同的路徑（路由），映射同一個組件。比如進了一個網(wǎng)站，到了個人信息頁面中，每個人信息頁面其實一樣的，只是不同等級的用戶展示的數(shù)據(jù)不同，這個時候就可以用到動態(tài)路徑。匹配到的所有路由，全都映射到同一個組件。
場景： 根據(jù)不同用戶展示不同的信息。
實現(xiàn)思路 ： 這個時候其實用的是同一個組件，只是展示的數(shù)據(jù)不同。首先需要在導航標簽（router-link）的to屬性上設置成動態(tài)的，也就是不同的用戶數(shù)據(jù)拼接而成，然后在組件上配置同樣的參數(shù)，這個時候就可以用路由信息對象獲取到用戶的id，如果獲取的id和數(shù)據(jù)里的某一項id相同，就把這條數(shù)據(jù)放入自己在data數(shù)據(jù)中新建的json上，數(shù)據(jù)綁定的是這個json

image.png

  • 動態(tài)路徑參數(shù),以冒號開頭
    路徑：/user/:userId ==>：userId為動態(tài)路徑參數(shù)
    userId可以使用正則符表示
    如：
    匹配 /user/:userId 有userId和沒有userId的都需要匹配上，可以寫成：
    path:/user/:userId?
    說明 ： 這里的userId？表示有userId和無userId都能匹配

注意：在路由path中，添加動態(tài)參數(shù)方法是 (:參數(shù)名)，這里可以加多個；
如：user/:userId/:tip

{
      /*
        這個userId是自己隨意定義的，:userId意思就是動態(tài)的，當訪問user后面嵌套一個路徑的時候，
        這個userId就等于標簽里寫好的名字
        :to="'/user/'+item.id"
      */
      // 這里的userId？表示有userId和無userId都能匹配,/user和/user/1 都可以匹配
      /*
        ********思路**********：
        1、通過路徑，就可以拿到userId，拿到userId，就可以找到對應的用戶信息；
        2、怎么拿到userId ？ 只需要拿到路由信息，就可以拿到這個值了。
        3、怎么拿到路由信息？看下一個API ：對組件注入.
      */
      path: '/user/:userId?', //user/1  user/2
      component: user,
    },

  • 如何拿到動態(tài)路由的信息：對組件的注入&獲取參數(shù)：路由信息對象的params

一個 route object（路由信息對象） 表示當前激活的路由的狀態(tài)信息，包含了當前 URL 解析得到的信息，還有 URL 匹配到的 route records（路由記錄）。

通過在VUE根實例的router配置傳入router實例

  • $router router實例對象
  • $router 當前激活的路由信息對象，每個組件實例都會有；
  • beforeRouterEnter() 進入組件前鉤子函數(shù)
  • beforeRouterLeave() 離開組件前鉤子函數(shù)
貼$route源碼如下 ： 
export default {
     watch : {
           $route(){
            let id = this.$route.params.userId;
            for(var i = 0;i<this.userList.length;i++){
              if(id==this.userList[i].id){
                this.userInfo=this.userList[i]
              }
            }
          }
      },
      created(){
        //復用這個組件，這個函數(shù)不會再次被調(diào)用了,所以需要用watch監(jiān)控
        //地址一但發(fā)生變化 ，$route會重新生成一個路由信息對象
        //:this.$route.params.userId這樣就得到了動態(tài)參數(shù)userId ： path: '/user/:userId?',
        let id = this.$route.params.userId;
        for(var i = 0;i<this.userList.length;i++){
            if(id==this.userList[i].id){
              this.userInfo = this.userList[i]
            }
        }
      }
 }
image.png

  • 查詢字符串：

帶查詢參數(shù)的鏈接地址，稱為：查詢字符串。

//下面的結(jié)果為 /user?info=share
<router-link :to="{ path: '', query: { info: 'share' }}">分享</router-link>

鏈接地址為：/user?info=share
在切換router-link時，如何獲取查詢字符串中，info=share的share字符串？
通過路由信息對象中的query對象，用于URL查詢參數(shù)的對象；

  • 過渡動效：

router 提供了transition的封裝組件，添加過渡動畫
控制方法：會用CSS類名控制


image.png
  • 使用方法：
    將需要添加過渡效果的router-view包在transition標簽中；如下 ：
<transition>
    <router-view></router-view>
</transition>
  • 過渡模式：
    in-out: ： 新進行過渡，完成之后當前元素過渡離開
    out-in：當前元素先進行過渡，完成之后新元素過渡進入
    使用方法如下：
<transition mode="輸入模式名">
    <router-view></router-view>
</transition>
  • 案例 ：
 <transition  mode="out-in">
      <router-view class="center"/></router-view>
 </transition>
.v-enter{
    opacity:0
  }
  .v-enter-to{
    opacity:1
  }
  .v-enter-active{
    transition:1s
  }
  .v-leave{
    opacity:0
  }
  .v-leave-to{
    opacity:1
  }
  .v-leave-active{
    transition:0
  }
//以下的切換形式需要在transition上設置name屬性，值為left
.left-enter{
    transform:translateX(100%)
  }
  .left-enter-to{
    transform:translateX(0)
  }
  .left-enter-active{
    transition:1s
  }
  .left-leave{
    transform:translateX(0)
  }
  .left-leave-to{
    transform:translateX(-100%)
  }
  .left-leave-active{
    transition:1s
  }

  • 編程式的導航：

除了使用 <router-link> 創(chuàng)建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。

  • back：回退一步
  • forward : 前進一步
<input type="button" value="后退" @click="backHandel">
<input type="button" value="前進" @click="forwardHandel">
 methods:{
        backHandel(){
          this.$router.back()
        },
        forwardHandel(){
          this.$router.forward()
        }
}
  • go : 指定前進回退步數(shù)
goHandel(){ //控制的是前進后退事件的步數(shù)
  this.$router.go(-1) //正數(shù)前進，負數(shù)后退
}
  • push : 導航到不同url，向history棧添加一個新的記錄
  • replace : 導航到不同url,替換history棧中當前記錄
  <input type="button" value="控制指定的導航push" @click="pushHandel">
  <input type="button" value="控制指定的導航replace" @click="replaceHandel">

  pushHandel(){ //跳轉(zhuǎn)到指定的路徑
    this.$router.push('/document') //正數(shù)前進，負數(shù)后退
    },
  replaceHandel(){
    this.$router.replace('/document')
  }

  • 路由元信息：

在路由配置中meta可以配置一些數(shù)據(jù)，用在路由信息對象中。

  • 訪問meta中的數(shù)據(jù)：$route.meta
  • 路由meta的設置方法：(在路由對象中配置)
routes:[
  {
   path:'/',
   meta:{
     index:0;//路由的下標
   }
  }
]

  • 如果路由中有子路由，就配置到默認的子路由中，不用配置到父路由中；

  • 頁面中獲取方法：

$route.meta.index
  • 通過監(jiān)聽$route，得到目標和離開導航的下標
watch:{
  $route(to,from){
     to.meta.index //目標導航下標
     from.meta.index //離開導航下標
  }
}

  • 導航鉤子函數(shù)（全局級）

導航發(fā)生變化時，導航狗子主要用來攔截導航，讓它完成跳轉(zhuǎn)或取消。(例如：如果用戶沒有登錄，就跳轉(zhuǎn)到登錄組件)

  • 執(zhí)行鉤子函數(shù)位置（書寫位置）

    router全局
    單個路由
    組件中

  • 鉤子函數(shù)

router實例上：beforeEach，afterEach
單個路由中：beforeEnter
組件內(nèi)的鉤子：beforeRouterEnter,beforeRouteUpdata,beforeRouteLeave

  • 鉤子函數(shù)接收的參數(shù)

to:要進入的目標路由對象，到哪里去
from:正要離開導航的里有對象，從哪里來
next:用來決定跳轉(zhuǎn)或取消導航

{
  path: '/document',
  name: 'document',
  meta:{
    index:1,
    login:true,
    title : 'document'
  }
}
router.beforeEach((to,from,next)=>{ //目標路徑，源路徑，進入導航
  next() //必寫，否則組件不會被渲染，參數(shù)寫false,組件不會被渲染
  if(to.meta.login){ //如果meta的login是true,那么表示沒有登錄，跳轉(zhuǎn)到login
    next('/login')
  }else{
    next() //否則就是登錄了，渲染組件即可
  }
})
router.afterEach((to,from,next)=>{
  if(to.meta.title){//如果title存在，就改成組件自己的meta內(nèi)的title
    window.document.title = to.meta.title
  }else{
    window.document.title = 'miaoei'
  }
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,954評論 25贊 709
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,544評論 19贊 139
  • 1路由，其實就是指向的意思，當我點擊頁面上的home按鈕時，頁面中就要顯示home的內(nèi)容，如果點擊頁面上的abou...
    你好陌生人丶閱讀 1,775評論 0贊 6
  • 用Vue.js + vue-router創(chuàng)建單頁應用，是非常簡單的，基本是這樣的： 組件 → 路由 → 渲染地方 ...
    阿go閱讀 1,448評論 0贊 0
  • 也是時候說說今天有點低落的自己。 一早就收到信息，剛請假回來的小菇?jīng)稣f自己回家的原因是因為一個little手術(shù)。講...
    良心已被狗吃了閱讀 175評論 0贊 0

友情鏈接更多精彩內(nèi)容