Vue---Vue路由

一.SPA (Single Page Application)

* 后端渲染（存在性能问题）

* Ajax前端渲染（前端渲染提供性能，但是不支持浏览器的前进后退操作）

* SPA (Single Page Application) 单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进的后退操作

* SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）

* 在实现SPA过程中，最核心的技术点就是前段路由

二.后端路由

* 概念：根据不同的用户URL请求，返回不同的内容 

* 本质：URL请求地址与服务器资源之间的对应关系 

 

 

 

三.前端路由

* 概念：根据不同的用户事件，返回不同的页面内容 

* 本质：用户事件与事件处理函数之间的对应关系 

 

 1.实现简易前端路由

* 基于URL中的hash实现（点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换） 

 

 2.Vue Router

Vue Router (官网：Vue Router) 是Vue.js官网的路由管理器，它和Vue.js的核心深度集成，可以方便的用于SPA应用程序的开发

 Vue Router包含的功能有：

* 支持Html5历史模式或hash模式

* 支持嵌套路由

* 支持路由参数

* 支持编程式路由

* 支持命名路由

 ①基本使用步骤

1.引入相关的库文件

 注意：需要先导入vue文件再导入vue-router文件

2.添加路由链接

 

3.添加路由填充位

 

4.定义路由组件

 

5.配置路由规则并创建路由实例

 

6.把路由挂载带Vue根实例中

 

② 路由重定向

路由重定向指的是:用户在访问地址 a 的时候，强制用户跳转到地址c，从而展示特定的组件页面;通过路由规则的redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

③嵌套路由

 1.嵌套路由功能分析

 * 点击父级路由链接显示模板内容

* 模板内容中又有子级路由链接

* 点击子级路由链接显示子级模板内容

 

 2.父路由组件模板

* 父级路由链接

* 父组件路由填充位

 3.子路由模板

* 子级路由链接

* 子组件路由填充位

 

4.嵌套路由配置

* 父级路由通过children属性配置子级路由

 

④Vue-router动态路由匹配

1.动态匹配路由的基本用法

 

 应用场景：通过动态路由参数的模式进行路由匹配

 2.路由组件传递参数

$router与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

*props的值为布尔类型

*props的值为对象类型

 *props的值为函数类型

 ⑤命名路由的配置规则

 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”

 3. Vue Router编程式导航

1.页面导航的两种方式

声明式导航：通过点击链接实现导航的方式 ，叫做声明式导航

  例如：普通网页中的<a></a>链接或vue 中的<router-link></router-link>

编程式导航：通过调用JavaSript形式的API实现导航的方式，叫做编程式导航

  例如：普通网页中的location.href

2.编程式导航基本用法 

常用的编程式导航API如下：

this.router.push('hash地址') 

this.$router.go(n)  当n等于-1的时候相当于this.$router.back()   返回上一级路由

router.push()方法的参数规则