vue-router 路由的认识

1： vue-router：的基本使用

2： vue-router:  的嵌套使用

3： vue-router:  的参数传递

4：vue-router:   的导航守卫

5： keep-alive

前端路由的核心就是： 改变url 的时候， 但是整个页面不进行整体刷新。

URL 的hash 值也就是锚点（#）  本质上就是改变 window.location 的href  属性。

我们可以通过直接赋值 location.hash 来改变href 值，但是页面不刷新。

使用location.hash = "foo"

就是改变 hash 值， 页面不会刷新。  不会发生重新请求。

html 5 中有一个history 历史模式。  pushState 模式

HTML5 中的pushState()  接受三个参数 （data, title, url）

history( {}, "", 'home');
改变url 路径不会发生刷新,  有两种模式 hash 模式,  一种就是HTML5 的history 历史模式。

pushState() 方法: 就是类似栈结构。 
数据结构就是先进后出,  后进先出的特点。

所以URL 显示就是栈顶的东西。
进栈, 出栈。

直接调用history.back();  出栈 就是返回上一层。 出栈结构
HTML5 中history 历史模式 replaceState 方法：
history.replaceState();   跟上三个参数(data, title, 'home');

repalceState 方法没有返回功能。

history 历史模式:  
history.back() 方法等价于 history.go(-1);  出栈
history.forward() 方法等价与 history.go(1);  进栈

前端三大框架
Angular.js  有自己的框架 ngRouter;
Vue 中  vue-Router
React 中有自己的React-router 路由。

vue-router 中路由:

vue-router 是vue 官方推荐使用的路由插件,  它是和vue.js 深度合成的,  适用于构建单页面应用。

安装路由: 后续开发主要使用工程化开发
第一步： 安装路由: vue-router
   使用 npm install vue-router --save;   为什么需要安装--save
   因为程序运行在客户端的时候也需要依赖路由。

第二步: 在模块化工程的时候使用 (因为是是一个插件,  所以可以通过Vue.use() 来安装路由功能)
   导入路由对象： 并且调用Vue.use(VueRouter);
   创建路由实例,  并且传入路由映射配置
   在Vue 实例中挂载创建的路由实例。

每一个.vue 但单组件中使用 export default {}  导出组件
然后在路由 index.js 中引入 该组件
<router-link>  该标签会被渲染成<a> 标签的,  该标签是 vue-router 中已经内置的一个组件

<router-view> 该标签会根据当前的路径渲染不同的组件。 占位组件
当路由切换的时候, 切换的是<router-view> 挂载的组建的, 其他的内容是不会发生变化的。


在配置路由规则的定义 定义路由模式是: mode: "history";

<router-link> 只是用了to 属性,  用于指定跳转的路径。

<router-link> 的其他属性; tag 属性 可以指定<router-link> 渲染成什么组件,  比如是一个button 按钮

在<router-link> 属性身上 加上replace 就会替换push 方法 （不可以返回）
在<router-link> 标签上 点击哪一个<router-link>  就会自动生成 router-link-active 类名。

但是可以修改这个类名。  使用active-class:  使用自定义类名。

vue-router 源码里边向每一个组件里边添加了$router 属性。



重点： $router 和$route 区别


$router: 就是创建出来大的路由对象,  可以调用push() 方法,  可以调用replace() 方法。
go() 方法,  forward() 方法。
$router: 就是new 出来的vueRoute对象,  在每一个组件都可以使用。

$route: 表示当前那个路由处于活跃的状态。 $route: 就是当前处于活跃的路由。

$router: newRouter 对象,  是一个大的路由对象。
在这个大的路由对象中, 有一个routers  路由规则, 里边有过很多配置路由规则
当前活跃的路由对象就是对应 $route。