「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」。
今天咱们的主角是Vue Router,这篇文章教你简单运用vue-router。
Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
先做个Vue Router介绍：
Vue Router 是 Vue.js 官方的路由管理器。它让构建单页面应用变得易如反掌。路由嘛，通俗点将就是你想去哪，点击，他带你去哪。
在讲Vue Router之前，首先我们来学习三个单词（route，routes，router）：
route：它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；
routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合。
router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个
ok，理论知识掌握了，现在我们就开始运用vue-router吧！
- 安装 vue-router
//执行npm命令
npm install vue-router
-
在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
-
引入第三方的依赖包, 并注册路由
//在index.js中
import Vue from 'vue'//引入vue
import VueRouter from 'vue-router'//引入vue-router路由模块
Vue.use( VueRouter ) //注册vue-router
4.入口文件main.js中,将这个router实例注入到Vue根组件实例中
import router from './router';//引入这个router文件，默认会打开index.js，所以index.js可以省略不写
const app = new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
5.创建了一个router对象实例，并且创建路由表
//Vue-router 路由尽量使用 component: () => import() --Vue的路由懒加载机制
const routes = [//路由表
{
path: '/home',
namae: '/home',
component: () => import("url")
}，//Home组件就是一个路由
//{...}
]
const router = new VueRouter({
mode:'',//有三个选项，默认是hash，还有history,abstract
base: "/",
routes//路由表 必写的
})
6.导出router实例，使用export default导出，只能导出一个
export default router;
ok，在vue项目中如何使用vue-router大概就是这样了，还有很多知识没有讲到，大家可以去官网瞅瞅哟,加油！
