携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
前言
Vue和React属于当下主流框架，初学者（包括我）在选择的时候可能会犯难，我给个个人建议：初学选啥都一样，看个人爱好，想UI和JS一起写的推荐React，想数据渲染简单一点的选择React，两者在编码上存在 互相借鉴 ，都推荐使用Hooks编码，原理也大差不差，会其中一个，另一个在花个一周时间可以很快上手，相当于买一送一，很实惠了。
本系列主要介绍以下模块：
- 1.基础模版语法指令
- 2.比较常用的特性
- 3.组件化开发
- 4.前后端的一些交互功能
- 5.一些路由知识
前端路由
官方文档 ， 路由都不陌生，URL之所以能根据地址访问对应对应资源，就是因为我们配置了路由。所以，路由就是这一种地址和资源对应的关系。路由也分为前端路由和后端路由，前端靠hash值实现，后端的靠服务器实现。
5.1、路由基本使用：
首先前端路由有 hash 和 history 两种模式，最直观的区别就是hash的URL中有丑丑的#符号。
hash模式：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。（本地项目启动，通常是hash模式）
history 模式：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
Vue-Router路由管理器 ，其使用步骤大致为：
1.定义route, 一条路由的实现。它是一个对象，由 path 和 component 两个部分组成，如
const routes = [
{ path: '/home', component: Home },
]
2.根据构造函数 new vueRouter() 创建router 路由，可以接收 routes 参数。
const router = new VueRouter({
routes // routes: routes
})
3.定义路由组件：地址匹配成功后，路由找到相应组件，最后将组件渲染到前面设置的占位符中
//占位符
<router-view></router-view>
var User = { template:"<div>This is User</div>" }
4.配置完成后，把router 挂载到 vue 根实例中即可
new Vue({
el:'#app'
router
});
这里面省略了一点执行过程的小细节：前面需设置 router-link 标签，当标签被点击时路由会去寻找它的 地址属性，如果路径和 js { path: '/home', component: Home} 中的path相互对应，那么就找到了匹配的组件， 最后把组件渲染到 标签所在的地方，到此路由完成。上述的这些都是基于hash 实现的。
5.2、路由重定向(redirect)：
一般路由默认的页面都是通过这个来设计的，实现也很简单， redirect 表示要被重定向的新地址，设置为一个路由即可。
{ path:"/",redirect:"/user"},
5.3、缓存路由
它可以让不展示的路由组件保持挂载，不被销毁。
<keep-alive>
<router-view></router-view>
</keep-alive>
5.3、命名路由
在多级路由跳转的时候，可以name:XX对路由命名
children: [ { path: '/welcome', component: Welcome,name:good } ]
然后通过命名跳转： router-link :to="{name:'hello'}"> 跳转 </router-link>
5.4、路由懒加载
如果不懒加载，打包后文件很大，进入首页需要加载的东西很多。 将路由对应的组件分割成不同的代码块，访问时加载对应组件。
//传统
//import Login from '../components/Login.vue'
//懒加载
//方法1,就不需要import导入了，直接在路由规则写入
export default new Router ({
routes: [
{
path: '/login',
name: 'Login',
component:resolve require([ '@/components/Login'],resolve )
},
]
})
//方法2,安装babel插件，从传统的import导入变成const 形式，可以对类型相同的路由分组。
const Home = () => import(/* webpackChunkName: 'Login' */ '@/components/Login')
路由在实际项目中属于比较简单的，在开发工具中能根据URL路径找到想要的页面模块，能找到请求接口的路径，能找到全局变量，或一些常态变量的位置就行，大部分可以用
path插件跳转到对应页面，然后copy组员之前写的，按照需求改改就好。
