vue3.0 CLI 真小白一步一步入手全教程系列：

尽量把纷繁的知识，肢解重组成为可以堆砌的知识。

我的 github 地址 -  - 阶段学习成果都会建立分支。

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

经过几天的学习，组件的应用已入门。

组件的内容还有很多：

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')

那么在模板中，便可以使用这些路由：

     
      主页
     
     
      表单
     
     
      VUE
     
     

router-view 是路由出口：点击【主页】那么 home.vue 组件就替换 <router-view/> 标签，点击【表单】，则 Forms.vue 组件替换 <router-view/> 标签。

其实就是组件渲染的位置的意思。

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

大概了解了下路由的定义和使用，也没有更新代码。下篇文章开始介绍路由的相关知识。