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

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/>

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

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

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

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