vue-router安装和使用

vue-router可以在用脚手架建立项目时选择自动安装，如果没有，也可在项目建立后，按照如下方式安装：
1、IDE命令行终端：npm install vue-router --save
2、在工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）：
     在src目录下建立route目录，里面创建index.js文件，配置路由相关内容：
     1）导入路由对象，并且调用Vue.use(VueRouter)安装该插件
     2）创建路由实例(与创建Vue实例相似)，并且传入路由映射配置
     3）在Vue实例中挂载创建的路由实例
在index.js中的配置：

这里还有加入解决后期使用this.$router.push()方法多次执行造成的路由重叠问题：

/**
 * 重写路由的push方法,解决再多次调用同一个push方法出现的问题
 */
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

在main.js中的配置：

 

 

路由的基本使用：

<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签，to属性为一个路径，指明要跳转到的组件，对应关系在router目录下的index.js中的路由映射表中，该表是一个对象数组，每个对象代表一个路由，每个对象有基本的两个属性：path，component(这里使用了懒加载，之后会提到)；请求路径如果与path相对应，则会跳转到该component所对应的组件

<router-view>：该标签用来占位，会被渲染出来的组件取代；在路由切换时，切换的是<router-view>挂载的组件，其它内容不会改变

1、路由的默认路径：
设置默认进入的页面：比如打开网站就默认打开首页的内容

2、router-link的补充：

默认改标签被渲染成a标签，使用tag可以指定所渲染的标签
replace不会留下history记录，所以指定replace的情况下，后退键不能返回到上一个页面
当<router-link>所对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，可以利用这个类，给元素设置样式

我们也可以在router实例中设置改值：

3、路由代码跳转：

利用$router.push()方法可以实现路由的跳转，方法参数为所要跳转组件所对应的path
也可利用replace()方法，若使用该方法，效果和在<router-link>中加入replace属性相同

4、动态路由(一种基础的路由传参)：
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下路径：/user/uId，该路径除了前面的/user之外，后面还跟上了用户的ID；下面这种path和component之间的匹配关系，我们称之为动态路由(也是路由传递参数的一种方式)
传递：

接收：

5、路由的懒加载：
我们在项目中通常会定义很多组件，这些组件默认最后都被打包到一个js文件中，这样用户从服务器第一次请求时就可能需要花费一段时间，甚至用户电脑上还可能出现短暂空白。
为了避免这种情况，我们要使用路由的懒加载，这样最后用户的每个组件页面都会单独打包成一个js文件
使用（更改路由映射变得component的路径方式）：

 

 

嵌套路由：
嵌套路由是一个很常见的功能，比如在home页面中，我们希望通过/home/news和/home/message访问HomeNews组件和HomeMessage组件，这两个组件显然和Home组件不是同平级，是Home组件的子组件；一个路由映射一个组件，访问这两个路径也会分别渲染两个组件
实现嵌套路由的步骤：
1、创建对应的子组件，并在路由映射表中配置对应的子路由

2、在组件内部使用<router-link>与<router-view>标签

 

路由参数传递：
传递参数主要有两种类型：params和query
params类型（动态路由）：
    配置路由表path格式：/router/id
    传递的方式：在path后面跟上对应的值
    传递后形成的路径：/router/123
query类型：
    配置路由表path格式：正常配置
    传递的方式：使用对象
    传递后形成的路径：/router?id=xx&name=xx
传递：
使用<router-link>：

使用路由代码跳转：

接收：

 

关于$router与$route：
$router代表router目录下index.js文件中的router实例，主要用于导航到不同的组件，使用其push()或replace()方法
$route代表当前处于活动状态的路由(路由映射表[]中)对象，从中可以获取name,path,query,params等

 

导航守卫：
全局导航守卫(在router实例所在index.js文件配置)：
这里用前置守卫+路由映射表相关设置实现标题的改变：

路由映射表中的映射信息加上meta选项：

路由独享的导航守卫(在路由映射表中配置)：

组件独享的导航守卫(在组件中定义)：
这里利用导航守卫beforeRouteLeave()+方法activated()+<keep-alive>标签完成情景：
首页中有新闻news和消息message，默认打开news，但点击消息后，点击关于，在返回后保持点开消息的状态