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

盡量把紛繁的知識，肢解重組成為可以堆砌的知識。

我的 github 地址 - vue3.0Study - 階段學習成果都會建立分支。

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

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

組件的內容還有很多：

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

2、組件的混入、自定義指令、渲染函數與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/>

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