前端路由

后端路由：每个url向服务器请求数据，后端渲染好网页发送给前端；
前后端分离：后端提供数据，前端通过api渲染数据
前端路由：单页面富应用，每个url和每个网页的映射关系，改变url不会向服务器请求资源。

1. location.hash
   改变hash来改变url不会刷新网页

2. history修改url
   history.pushState({},’’,‘about’)
   history.replaceState({},’’,‘about’)
   history.go()
   history.back()
   history.forward()

安装使用vue-router

安装 npm install vue-router --save

模块化工程中vue-router是一个组件

1. 导入路由对象，并且调用
   
   

2. 创建路由实例，并且传入路由映射配置
   

3. 在Vue实例中挂载创建的路由实例
   
   使用vue-router的步骤

4. 创建路由组件
   

5. 配置路由映射，组件和路由映射的关系
   

6. 使用<router-link>引入路由组件和<router-view>占位，在App.vue文件中
   

路由嵌套

路由组件之间传递参数

1 params的类型
配置路由格式：/router/:id

在path后面跟上对应的值

传递后形成的路径：/router/123

当前文件的路由对象

当前激活的路由

2 query的类型
配置路由格式 /router，普通配置
对象中使用query的key作为传递方式
传递后形成的路径/router?id=123

NavigationGuards(导航卫士)

前置钩子，钩子一般是回调的意思
router.beforeEach((to,from,next)=>{
})

to：要导航到的Route对象
from：当前离开的对象
next: next()直接通过，导航被确认，要确保始终调用next函数，