編程式導(dǎo)航

注意：在 Vue 實(shí)例內(nèi)部，你可以通過 router.push

• 1. 聲明式導(dǎo)航
     <router-link></router-link>
• 2. 編程式導(dǎo)航
     js 路由對(duì)象提供的 方法來 跳轉(zhuǎn),路由實(shí)例調(diào)用方法(router 路由 給Vue灌入一個(gè)對(duì)象，就是 路由對(duì)象（new VueRouter()）

**使用$router.push()方法**
1. 參數(shù)為字符串
this.$router.push('跳轉(zhuǎn)路由的path')

2. 參數(shù)為對(duì)象
this.$router.push({
    path:'/home'
})

this.$router.push({
    name:'home' //命名路由
})

編程式導(dǎo)航路由傳參匯總

• 1. 動(dòng)態(tài)路由傳參

{
      // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開頭
      path:'/news/:id',
      component: NewsSon
},

• 2. query傳參 (最好搭配path)

this.$router.push({
      //query傳參 path一起使用 (最好不要和name一起使用)
          /*
     優(yōu)點(diǎn):
           頁面刷新 參數(shù)不丟失
      缺點(diǎn):
          參數(shù) 放在url上 顯式的
           獲取：
             this.$route.query.a
           this.$route.query.b
         */
          path:'/home',
          query:{
           a:10,
          b:20
     }
  })

• 3. params傳參(搭配name命名路由)

this.$router.push({
          //params傳參 （和name是固定搭配）
          /*
            優(yōu)點(diǎn)：
              隱式 （地址上不顯示）
            缺點(diǎn):
              刷新丟失
            注意:
              params 傳參和命名固定搭配
            獲取
              this.$route.params.a
          */
          name:'news',
          params:{
            a:10,
            b:30
          }
        })

編程式導(dǎo)航 go

this.$router.go(n)
  n
    0  刷新
    -1 回退  
    1 前進(jìn)一步

路由模式

 路由模式
         hash路由   默認(rèn)的
            window.addEventListener("hashchange",(e)=>{
              // 根據(jù)hashchange 事件 來動(dòng)態(tài)切換 不同組件
            })
         history
            路由好處：不再有#存在
            原理：
              history對(duì)象有一個(gè) pushState
          注意：
          此模式 需要 服務(wù)器 做配置
          /
          服務(wù)配置：
            如果 你的地址 / 重定向到 當(dāng)前 index.html（有vue，vueRouter）下