1.前言

不同的路由方式,都需要所了解,這樣在實際使用中才能比較靈活
雖然其實我在工作中甚少用到編程式導(dǎo)航
正好借此機會梳理一下

2.router實例方法跳轉(zhuǎn)

之前是通過 router-link創(chuàng)建a標(biāo)簽來定義導(dǎo)航鏈接

語法

router.push(location, onComplete?, onAbort?)

使用

this.$router.push()
這個方法會向history棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL

當(dāng)你點擊<router-link>時，這個方法會在內(nèi)部調(diào)用，所以說，點擊<router-link :to="...">等同于調(diào)用router.push(...)

3.具體使用方式

直接腳手架 選擇帶vue-router 創(chuàng)建項目

字符串 路徑

router 里面配置的 path

this.$router.push("boy")

對象

router 里面配置的 path

this.$router.push({path:"boy"})

命名路由 帶參數(shù)

router 里面配置的 path

this.$router.push({name:"Boy",params:{userId:'123'}})

path 不能帶 參數(shù) params會被忽略

 this.$router.push({path:"boy",params:{userId:'123'}})

path 配合 query

地址欄會拼接上 boy?userId=123

this.$router.push({path:"boy",query:{userId:'123'}})

直接 path

this.$router.push({path:`boy/${userId}`})

注意路由配置 需要配置下 傳參

{
        path: '/boy/:userId',
        name: 'Boy',
        component: () => import( '@/views/boy.vue')
      },

獲取路由信息

在目標(biāo)界面獲取 比如 boy.vue

 created(){
        console.log("----------路由",this.$route);
 }

4. router.replace()

router.replace(location, onComplete?, onAbort?)
跟router.push很像，唯一的不同就是，它不會向history添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history記錄。

5.router.go(n)

這個方法的參數(shù)是一個整數(shù)，意思是在history記錄中向前或者后退多少步，類似window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

6. 404界面配置

1. 默認(rèn)會去找index文件
   所以'@/views/NotFound/index.vue 可以省略index.vue

2. path:'*' 中*
   就是簡單的正則 為通配符，匹配所有路徑
   redirect:重定向到404頁面
   必須將此路由配置放到最后，否則無法實現(xiàn)該功能

 {
    path:'/404',
    name:"404",
    component: () => import( '@/views/NotFound')
  },
  {
    path:'*',
    redirect:{
      name:"404"
    }
  }

7. 嵌套路由配置

以/開頭的嵌套路徑會被當(dāng)作根路徑
子路由不加/ 會自己拼接
一級路由建議 最好加個 **/**

 {
        path: 'two',
        name: 'Two',
        component: () => import( '@/views/day/two.vue'),
        redirect:"level31",
        children:[
          {
      //  瀏覽器地址顯示 #/level31
            path:"/level31",
            component: {render(h){ return h("h1","前端")}}
          },
          {
          // 瀏覽器地址 顯示#/two/level32
            path:"level32",
            name:"name32",
            component: {render(h){ return h("h1","后端")}}
          },
          {
        // 想顯示路由層級 也可以寫完整的地址
            path:"/two/level33",
            name:"name33",
            component: {render(h){ return h("h1","測試")}}
          },
          {
            path:"/two/level34",
            component: {render(h){ return h("h1","UI")}}
          }
        ]
      },

8.路由跳轉(zhuǎn) two界面

注意不管是幾級路由 跳轉(zhuǎn)的時候用命名路由自己會去拼接路徑

<ul>
      <li>
        <router-link to="/level31">前端</router-link>
      </li>
      <li>
        <router-link :to="{name:'name32'}">后端</router-link>
      </li>
      <li>
        <router-link :to="{name:'name33'}">測試</router-link>
      </li>
      <li>
        <router-link to="/two/level34">UI</router-link>
      </li>
    </ul>
    <router-view></router-view>

9. 問題

另外大家可能 也發(fā)現(xiàn)個問題,路由切換的時候如果 在created 里面發(fā)請求,只會走一次 created,那是因為因為效率問題,復(fù)用了這個組件,所有沒有進行重新創(chuàng)建,怎么解決呢,且聽下篇文章分解vue路由-3監(jiān)聽-守衛(wèi)

10.后記

其實官方文檔寫的非常清楚,還是建議 看看官網(wǎng), 我這水平只能做到拋磚引玉,盡量做好 一塊好磚的工作

參考資料

vue-路由

初心

我所有的文章都只是基于入門，初步的了解；是自己的知識體系梳理;

如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;

共勉