本文已参与「新人创作礼」活动，一起开启掘金创作之路
本文已参与「新人创作礼」活动，一起开启掘金创作之路
路由是路径和组件的映射关系
1.页面的分类
一般分为两类，一个是页面组件，一个是复用组件，在src/views文件夹中一般放页面组件，页面展示，配合路由切换页面。在src/components文件夹下放复用组件，展示数据，常用于复用。
2.vue-router的使用
-
下包 需要注意的是需要注意版本，跟所使用的vue版本适应 *在main.js中引入 import VueRouter from 'vue-router'
-
安装插件 Vue.use(VueRouter)
-
创建路由规则数据 const routes = []
一个对象就是一个路由规则，路由规则就是路径跟组件的映射关系
路由规则的写法： path 路径，全小写，component 组件，指定组件对象
-
创建路由对象，根据路由规则来创建
const router = new VueRouter（{ routes }）
-
把router对象挂载在Vue实例上
3.如何实现路由
在需要使用组件的地方使用占位符
4.声明式导航
组件router-link 来替换a标签的跳转。使用router-link 后期两种路由模式可以随意切换，导航高亮值需要加一个css属性，router-link已经给当前导航自动添加了一个类名
5.路由传参
两种方式
- 查询参数传参，在router-link 上的to属性传值，语法格式如下
/path?参数名=值
对应页面组件接收传递过来的值$route.query.参数名
- 动态路径传参 语法 /path/值-需要路由对象提前配置path:"path/:参数名" 对应页面组件接收传递过来的值$route.params.参数名
6.传参的意义
1.渲染页面的时候，created中发请求获取列表数据，存到data使用v-for渲染，一般情况下列表数据中是没有当前的详细信息，需要点进去跳转一个新页面才有详细信息，那么这个新页面需要渲染页面的时候肯定需要id的，那么这个id从哪里来，就是路由中传过来的
7.路由的重定向
配置path后，强制跳转path路径，例如网页第一次加载有默认页面，配置redirect
8.页面404的问题
当访问不存在的页面的时候给个显示404的提示页面，配置方法 ，在路由规则中配置一个规则 { path：'*',component://自己定义的404页面 }
9.编程式导航
注册一个点击事件，事件函数里面写你要跳转的路径this.router.push(path)，可以使用path和name两种方式跳转，传参的方式也有两种，query：{'参数名'：值}，params：{'参数名'：值}，但是需要注意的是如果用path跳转，那么会忽略params传参。
10.路由的嵌套
路由规则中有一个children属性，children是一个数组，如需配置二级路由，在children属性中写二级路由的规则，语法通一级路由，唯一不同的是，一级路由中的路径带'/',二级路由不带
11.全局前置守卫
每次跳转之前，前置守卫会拦截一下，由它来决定是否能跳转
router.beforeEach((to, from, next) => { //to 到哪里去 //from 从哪里来 //next（） 放行，不传参是放行，传参是阻止，也可以跳转指定的路径 })
12.两种路由模式，以及原理
路由分为hash和history两种方式，hash模式下路径地址上有#，实现的原理是原生的hashChange事件，主要是通过事件监听hash值的变化，不会发生请求，页面不会有任何问题，不需要后端配合。history模式下路径上没有#，实现的原理，是依赖history api中的popState（）和pushState（）来实现，刷新页面会发送请求，会按修改后的地址请求后端，这个时候就需要后端进行配置处理，讲地址访问做映射，不然就会出现导致页面找不到出现404。
路由模式的切换，在路由的mode类型改成history即可。
欢迎补充~
