一 .什么是路由?
路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科
二 .路由器提供了两种机制: 路由和转送.
- 路由是决定数据包从来源到目的地的路径.
- 转送将输入端的数据转移到合适的输出端.
- 路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包的指向.
三 .Vue-router的功能
*Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变得轻而易举。功能包括：
- 嵌套路线/视图映射
- 模块化，基于组件的路由器配置
- 路由参数，查询，通配符
- 查看由Vue.js过渡系统提供动力的过渡效果
- 细粒度的导航控制
- 与自动活动CSS类的链接
- HTML5历史记录模式或哈希模式，在IE9中具有自动备用
- 可自定义的滚动行为
Vue-router构建单应用界面的核心
改变URL，但是页面不进行整体的刷新。
如何做到这一点呢？
方法一：URL的hash
- URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
-
我们可以通过直接赋值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.
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')
网友评论