目录
一.动态路由
1.什么是动态路由？
2.动态路由如何进行参数的传递：
（1）如何设置URL地址中的参数：'/url/:参数名'
（2）在组件中接收参数：this.$route.params.参数名
3.$route和$router的区别：
（1）$router：
（2）$route：
4.示例：
（1）创建数据文件：assets/books.js
（2）创建组件：
（3）创建路由文件：src/router/index.js
（4）在main.js文件中注册自定义的路由器
（5）在App.vue中通过超链接渲染Books.vue组件
（6）修改路由文件：src/router/index.js
（7）修改Books.vue中的和
二.路由中的查询参数
1.查询参数的格式：在URL地址中带参数，例如：'/url地址?参数名1=参数值1&参数名2=参数值2'
2.在组件中接收查询参数：this.$route.query.参数名
3.示例：通过查询参数实现动态路由的效果
（1）修改路由文件：
三.命名路由
1.什么是命名路由？
2.在中使用name进行映射
四.命名视图
1.给指定名称：在使用时如没有给设置名称，默认为default，可以定义多个路由视图，每个路由视图都指定名称
2.在路由表中给路由项添加components属性：将组件渲染到给定名称的视图中
五.声明式导航 & 编程式导航
1.声明式导航：以超链接方式实现的页面跳转，就是声明式导航
2.编程式导航：通过JavaScript提供的api方法实现页面的跳转，就是编程式导航
3.vue-router中提供的编程式导航的API
（1）this.$router.push('url')：将'url'添加到路由表中，增加了一条路由记录
（2）this.$router.replace('url')：跳转到url中，并替换掉当前的历史记录
（3）this.$router.go(number)：参数是一个数值，页面跳转到指定的位置
（4）this.$router.go()的简化写法：
六.导航守卫
1.用途：在页面导航过程中实现重定向、取消路由、权限验证等业务
2.分类：全局守卫、组件内部守卫、路由独享的守卫
3.全局守卫：
（1）全局的前置守卫：使用router.beforeEach(to,from,next){}来注册
（2）next调用的情况：
4.全局前置守卫的使用：
（1）创建Login.vue组件
（2）在路由文件router / index.js中注册全局的前置守卫
一.动态路由
1.什么是动态路由？
将URL地址中可变的内容设置成参数，根据不同的参数渲染不同的组件。（组件可以复用）
2.动态路由如何进行参数的传递：
（1）如何设置URL地址中的参数：'/url/:参数名'
（2）在组件中接收参数：this.$route.params.参数名
3.$route和$router的区别：
（1）$router：
A.是VueRouter的实例，是一个全局的路由对象。用户可以在任何地方使用
B.包含了所有的路由对象（实际代表的路由文件---路由表、路由模式）
C.可以通过$router进行路由跳转（push、replace）
（2）$route：
A.代表当前正在跳转的路由对象，是一个局部对象
<router-link to="/login/123">登录</router-link>
B.每个路由都有一个$route
C.用法：this.$route后面跟name、path、params、query
4.示例：
（1）创建数据文件：assets/books.js
（2）创建组件：
Books.vue：显示图书列表（显示图书名称）
Book.vue：显示图书的详细信息（由路由参数id）
（3）创建路由文件：src/router/index.js
（4）在main.js文件中注册自定义的路由器
（5）在App.vue中通过超链接渲染Books.vue组件
（6）修改路由文件：src/router/index.js
（7）修改Books.vue中的<router-link>和<router-view>
二.路由中的查询参数
1.查询参数的格式：在URL地址中带参数，例如：'/url地址?参数名1=参数值1&参数名2=参数值2'
2.在组件中接收查询参数：this.$route.query.参数名
3.示例：通过查询参数实现动态路由的效果
（1）修改路由文件：
三.命名路由
1.什么是命名路由？
在路由表中给路由项设置name属性
2.在<router-link>中使用name进行映射
四.命名视图
1.给<router-view>指定名称：在使用时如没有给<router-view>设置名称，默认为default，可以定义多个路由视图，每个路由视图都指定名称
2.在路由表中给路由项添加components属性：将组件渲染到给定名称的视图中
五.声明式导航 & 编程式导航
1.声明式导航：以超链接方式实现的页面跳转，就是声明式导航
<a href='url'>链接文本或图像</a>
<router-link to='url'>链接文本或图像</router-link>
2.编程式导航：通过JavaScript提供的api方法实现页面的跳转，就是编程式导航
location.href = 'url'
location.go(number)
location.replace('url')
3.vue-router中提供的编程式导航的API
（1）this.$router.push('url')：将'url'添加到路由表中，增加了一条路由记录
（2）this.$router.replace('url')：跳转到url中，并替换掉当前的历史记录
（3）this.$router.go(number)：参数是一个数值，页面跳转到指定的位置
（4）this.$router.go()的简化写法：
A.this.$router.back()：后退
B.this.$router.forward()：前进
六.导航守卫
1.用途：在页面导航过程中实现重定向、取消路由、权限验证等业务
2.分类：全局守卫、组件内部守卫、路由独享的守卫
3.全局守卫：
（1）全局的前置守卫：使用router.beforeEach(to,from,next){}来注册
to：将要访问的路由的信息对象
from：将要离开的路由的信息对象
next：是一个函数，调用next()表示当前路由已经放行
（2）next调用的情况：
A.用户拥有了权限，直接放行：next()
B.用户没有权限，强制跳转到指定的页面：next('/login')
C.用户没有权限，不允许访问：next(false)
