Vue-Router

一 .什么是路由?

路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科

二 .路由器提供了两种机制: 路由和转送.

• 路由是决定数据包从来源到目的地的路径.
• 转送将输入端的数据转移到合适的输出端.
• 路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包的指向.

三 .Vue-router的功能

*Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变得轻而易举。功能包括：

• 嵌套路线/视图映射
• 模块化，基于组件的路由器配置
• 路由参数，查询，通配符
• 查看由Vue.js过渡系统提供动力的过渡效果
• 细粒度的导航控制
• 与自动活动CSS类的链接
• HTML5历史记录模式或哈希模式，在IE9中具有自动备用
• 可自定义的滚动行为

Vue-router构建单应用界面的核心

改变URL，但是页面不进行整体的刷新。 如何做到这一点呢？

方法一：URL的hash

• URL的hash也就是锚点(#), 本质上是改变window.kk属性.
• 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

方法二：history接口

history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.

• history.pushState()

• history.replaceState()

• history.go()

• ps： 上面只演示了三个方法 因为 history.back() 等价于 history.go(-1) history.forward() 则等价于 history.go(1) 这三个接口等同于浏览器界面的前进后退。

四 .vue-router是基于路由和组件的

路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

五. 安装和使用vue-router

因为我们已经学习了webpack, 后续开发中主要是通过工程化的方式进行开发的.我们直接使用npm来安装路由即可.

• 步骤一: 安装vue-router npm install vue-router --save
• 步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
  • 第一步：router/index.js中导入路由对象，并且调用 Vue.use(VueRouter)
  • 第二步：router/index.js中创建路由实例，并且传入路由映射配置
  • 第三步：在Vue实例中挂载创建的路由实例

  

  左边创建导入使用Vue-router并配置映射关系,

• 使用vue-router的步骤:
  • 第一步: 创建路由组件
  • 第二步: 配置路由映射: 组件和路径映射关系
  • 第三步: 使用路由: 通过<router-link>和<router-view> <router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签. <router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件. 网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和<router-view>处于同一个等级. 在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变.

  

  步骤图解 效果图

  

路由的默认路径--redirect

路由的默认路径即：默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容. 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.

如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?

我们只需要配置多配置一个映射就可以了.

配置解析:

我们在routes中又配置了一个映射. path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

如何改变Vue-router加载组件的方式?

我们前面说过改变路径的方式有两种:

• URL的hash(浏览器URL中带#不好看)
• HTML5的history 默认情况下, 路径的改变使用的URL的hash.

如果希望使用HTML5的history模式, 非常简单, 在router.js进行如下配置即可:

router-link补充

在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径. <router-link>还有一些其他属性:

• tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a> <router-link to='/home' tag='li'>
• replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中<router-link to='/home' tag='li' replace>
• active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前渲染的标签元素设置一个router-link-active的class, 在标签内设置active-class可以修改默认的名称router-link-active.
  • 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
  • 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.

  

通过代码进行路由跳转

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了 比如, 我们修改之前的router-link为button并绑定click,将代码修改如下:

当然如果我们不想用push这种可以返回的路由控制,我们也可以用this.$router.replace('/home')