純小白入手 vue3.0 CLI - 3.2 - 路由的初級使用

vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html

儘可能把紛繁的知識，肢解重組成爲能夠堆砌的知識。

學會工具並不難，思考如何運用這些工具，纔是編程或者工做中最難的部分。

個人 github 地址 - vue3.0Study - 階段學習成果都會創建分支。

==========================

動態路由

在路由某部分里加入[ : ]，就成爲動態路由如：/user/:id/，那麼路由導航，並非  /user/id/ 而是 /user/666/。

顯然這個 id 能被獲取，在組件中使用。經過 this.$route.params 獲取。 this 是當前組件，$route 是路由對象，params 是一個對象字面量 { id:666 }。

$route 經過 Vue.use(Router) 和 new Vue({ router, store, render: h => h(App) }).$mount('#app') 全局依賴注入，在全部組件中均可以使用它。

一、router.js 中 path: '/about' 路由 改成 path: '/about/:id'。

二、About.vue 中 <top-nav title="軍事" :class="{ active: isActive }"/> 添加紅色部分。

三、About.vue 中 data 或者 computed 屬性中添加 isActive: function () { return this.$route.params.id === "666"; }

四、App.vue 中 <router-link to="/about/666">VUE</router-link>

五、About.vue 中 <style lang="less"> .active { background: red; } </style>

保存點擊【VUE】導航按鈕，便可見到效果：

如何取得 $route 中參數的值，即是很大的進步。這個參數能夠用在任何地方，能夠用來作任何事情。

好比傳遞數據，根據路由參數動態從服務器獲取組件內容等

在進行下一個內容學習以前，commit 一下。

嵌套路由(子路由) 

在頁面，一般存在多級導航。vue 官方網站即是多級導航的例子：頂部爲一級導航欄，左側爲二級導航欄。

導航一般對應 <router-link> 而 <router-link> 與 <router-view/> 對應。

並不是只有 App.vue 中才能存在 <router-view/>， 任何組件均可以。

下面把 HelloWorld.vue 變爲 About.vue 的子路由：

一、<HelloWorld msg="vue 官方相關資料的連接"/> 替換爲  <router-view/>

二、router.js 中關於 About.vue 組件的路由 替換爲

    {
      path: '/about/:id',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      children: [
        {
          path: '1',
          component: HelloWorld,
          props: (router) => ({
            msg: router.query.msg
          })
        }
      ]
    }

在瀏覽器地址欄輸入 http://localhost:8081/#/about/666/1?msg='welcome to nDos blog' 查看效果。

編程式導航與路由命名

在 vue 初始化的工程中，路由配置時，組件都已作好命名。這即是路由命名。

編程式導航，儘可能使用命名的路由，以下：

router.push({ name: 'about', params: { userId: 123 }})

由於使用 path 屬性進行編程式導航，params 無效。

這樣使用路由跳轉，使得單頁面編程的路由跳轉更加靈活。好比某個跳轉按鈕，能夠綁定函數，進行條件跳轉。

關於這兩個的內容並很少，參照官網教程學習。

命名視圖

在一個組件中，若是有多個組件出口，好比：在某個頁面，須要同時展現不少個組件時。

只有一個 <router-view/> 顯然不能知足需求。

多個 <router-view/> 同時存在的時候，就必需要加以區分，用的是 name 屬性：<router-view name="a"/>

在 router.js 中的 components 屬性中，添加多個組件便可 ( 到這裏才明白爲何 components 爲何是複數形式的寫法  )。

路由參數

在介紹動態路由的時候，已經看到路由參數的應用，這個東西也不復雜，參照官方教程學習。

==========================

關於路由的初級知識到這裏介紹完。

下面會開始學習工做中經常使用的路由知識。