純小白入手 vue3.0 CLI - 3.1 - 路由 ( router )

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

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

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

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

通過幾天的學習，組件的應用已入門。

組件的內容還有不少：

一、組件內部各種對象 ( $root $parent )、依賴注入、事件監聽、循環引用、控制更新等。

二、組件的混入、自定義指令、渲染函數與JSX、插件、過濾器。

這些內容，未來進行大型學習類應用開發時，進行深刻介紹。

爲了可以儘快的應用 vue，下面進入路由的學習。

 

在前面的章節中，已接觸過路由的相關代碼。我把路由分爲兩部分：路由的定義，路由的應用。

路由的定義

在 router.js 中有以下代碼：

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/form', name: 'forms', component: Forms },
    { path: '/about',  name: 'about', 
       component: () => import( './views/About.vue')
    }
  ]
})

上述代碼是路由的定義，紅色是路由的引入 ( 必須的過程 )。而後即是定義路由路徑 path 與對應的組件 component。

路由的應用

在 main.js 中有以下代碼，即是引入定義好的路由

import router from './router'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

那麼在模板中，即可以使用這些路由：

<router-link to="/">主頁</router-link>
<router-link to="/form">表單</router-link>
<router-link to="/about">VUE</router-link>

<router-view/>

router-view 是路由出口：點擊【主頁】那麼 home.vue 組件就替換 <router-view/> 標籤，點擊【表單】，則 Forms.vue 組件替換 <router-view/> 標籤。

其實就是組件渲染的位置的意思。

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

大概瞭解了下路由的定義和使用，也沒有更新代碼。下篇文章開始介紹路由的相關知識。