【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

时间 2019-11-08

标签 Vue.js 牛刀小试第十二使用 vue router 实现前端路由控制栏目系统网络繁體版

原文原文链接

系列目录地址

前言

前端路由是什么？若是你以前从事的是后端的工做，或者虽然有接触前端，可是并无使用到单页面应用的话，这个概念对你来讲仍是会很陌生的。那么，为何会在单页面应用中存在这么一个概念，以及，前端路由与咱们后端的路由有什么异同呢。本章，咱们就来简单介绍下前端路由的概念，以及如何在 Vue 中使用 Vue Router 来实现咱们的前端路由。css

仓储地址：Chapter02-Bronze Build Router in Vue.jshtml

干货合集

在传统的多页面应用中，网站的每个 URL 地址都是对应于服务器磁盘上的一个实际物理文件。例如，当咱们访问 www.yousite.com/index.html 这个网址的时候，服务器会自动把咱们的请求对应到当前站点路径下面的 index.html 文件，而后再给予响应，将这个文件返回给浏览器。当咱们跳转到别的页面上时，毫无疑问则会再重复一遍上面的过程。前端

可是在单页面应用中，整个项目中只会存在一个 html 文件，当用户切换页面时，只是经过对这个惟一的 html 文件进行动态重写，从而达到响应用户的请求。也就是说，从切换页面这个角度上说，应用只是在第一次打开时请求了服务器（非服务端渲染的单页应用）。vue

由于访问的页面是并不真实存在的，因此如何正确的在一个 html 文件中展示出用户想要访问的信息就成为单页面应用须要考虑的问题，而对于这一路由问题的解决方案，为了与咱们后端传统意义上的路由进行区别，就将此称为前端路由。html5

1、前端路由的实现方式git

目前的前端路由的实现方式主要是经过 hash 路由匹配或者是采用 html5 中的 history api 这两种，也就是说，不论是 hash 路由仍是使用 history 路由模式，其实都是基于浏览器自身的特性。程序员

hash 路由：hash 这个概念，可能听起来有些陌生，不过，其实咱们在以前的前端开发中，实际上是有所接触的。例如，在某些状况下，咱们须要定位页面上的某些位置，就像下面的例子中展示的那样，我想要经过点击不一样的按钮就跳转到指定的位置，这里咱们使用的锚点定位其实就是 hash。github

<div id="content">
  <div class="btn-container">
    <a class="btn" href="#image1">图片1</a>
    <a class="btn" href="#image2">图片2</a>
  </div>
  <img src="./xxx/xxx.jpg" id="image1">
  <img src="./xxx/xxx.jpg" id="image2">
</div>
复制代码

hash 路由的本质是浏览器 location 对象中的 hash 属性，它会记录连接地址中 '#' 后面的内容（e.g.：#part1）。所以，咱们能够经过监听 window.onhashchange 事件获取到跳转先后访问的地址，从而实现地址切换的目的。面试

history 路由：在以前的 html 版本中，咱们能够经过 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。而 history 路由则是使用了 html5 中新增的 pushState 事件和 replaceState() 事件。vue-router

经过这两个新增的 API，就能够实现无刷新的更改地址栏连接，配合 AJAX 就能够作到整个页面的无刷新跳转，具体实现的原理你们能够看看这篇文章 =》HTML5 简介（三）：利用 History API 无刷新更改地址栏

在 Vue 中，Vue Router 是官方提供的路由管理器。它和 Vue.js 的核心深度集成，所以，不论是采用 hash 的方式仍是使用 history api 实现咱们的前端路由都有很好的支持，因此这里咱们采用 Vue Router 这一组件来实现咱们的前端路由。

2、路由实现

首先咱们须要将 Vue Router 添加引用到咱们的项目中，这里我仍是采用直接引用 js 文件的方式为咱们的示例代码添加前端路由支持。

在 Vue 中使用 Vue Router 构建单页面应用，咱们只须要将组件 (components) 映射到定义的路由 (routes) 规则中，而后告诉 Vue Router 在哪里渲染它们，并将这个路由配置挂载到 Vue 实例节点上便可。

在 Vue Router 中，咱们使用 router-link 标签来渲染连接，固然，默认生成的是 a 标签，若是你想要将路由信息生成别的 html 标签，则可使用 tag 属性指明须要生成的标签类型。

<!-- 默认渲染成 a 标签 -->
<router-link to="/home">主页</router-link>

<!-- 渲染成 button 标签 -->
<router-link to="/home" tag="button">主页</router-link>
复制代码

能够看到，当咱们指定 tag 属性为 button 后，页面渲染后的的标签就变成了 button 按钮。一样的，它仍是会监听点击，触发导航。

同时，从上图能够看出，当前的连接地址为 #/home，也就是说，经过 router-link 生成的标签，当页面地址与对应的路由规则匹配成功后，将自动设置 class 属性值为 .router-link-active。固然，咱们也能够经过指定 active-class 属性或者在构造 VueRouter 对象时使用 linkActiveClass 来自定义连接激活时使用的 CSS 类名。

<!-- 使用属性来设定自定义激活类名 -->
<router-link to="/home" active-class="aaaa">主页</router-link>

<!-- 在构造对象时设定全局默认类名 -->
const router = new VueRouter({
    routes: [],
    linkActiveClass: 'aaaaa'
})
复制代码

当路由表构建完成后，对于指向路由表中的连接，须要在页面上找一个地方去显示已经渲染完成后的组件，这时，咱们就须要使用 router-view 标签去告诉程序，咱们须要将渲染后的组件显示在当前位置。

在下面的示例代码中，模拟了 Vue 中路由的使用，当访问 #/home 时会进行加载 home 组件，而当连接跳转到 #/account 时则会加载 account 组件。同时，咱们能够发现，在 account 组件中又包含了两个子路由，经过点击 account 组件中的子路由地址，从而加载对应的 login 组件和 register 组件。

<script src="../../lib/vue.js"></script>
<script src="../../lib/vue-router.js"></script>
<style> .container { background-color: aquamarine; margin-top: 20px; width: 740px; height: 300px; } </style>

<div id="app">

    <!-- 经过 router-link 标签来生成导航连接 -->
    <router-link to="/home">主页</router-link>
    <router-link to="/account">帐户</router-link>

    <div class="container">
        <!-- 将选中的路由渲染到 router-view 下-->
        <router-view></router-view>
    </div>
</div>

<template id="tmpl">
    <div>
        <h3> account page </h3>

        <!-- 生成嵌套子路由地址 -->
        <router-link to="/account/login">登陆</router-link>
        <router-link to="/account/register">注册</router-link>

        <!-- 生成嵌套子路由渲染节点 -->
        <router-view></router-view>
    </div>
</template>

<script> // 一、定义路由跳转的组件模板 const home = { template: '<div> home page </div>' } const account = { template: '#tmpl' } const login = { template: '<div> login page</div>' } const register = { template: '<div> register page</div>' } // 二、定义路由信息 const routes = [{ path: '/', redirect: '/home' }, { path: '/home', component: home }, { path: '/account', component: account, children: [{ path: 'login', component: login }, { path: 'register', component: register } ] } ] const router = new VueRouter({ //mode: 'history', //使用 history 模式仍是 hash 路由模式 routes }) // 三、挂载到当前 Vue 实例上 const vm = new Vue({ el: '#app', data: {}, methods: {}, router: router }); </script>
复制代码

在上面的代码中，也使用到了嵌套路由和路由的重定向。经过使用路由重定向，咱们能够将用户访问网站的根目录 / 时进行重定向到 /home ，而嵌套路由则能够将 URL 中各段动态路径也按某种结构对应到实际嵌套的各层组件。

例如，这里的 login 组件和 register 组件，它们都是位于 account 组件中的，所以，在构建 url 时，咱们应该将该地址位于 /account url 后面，从而更好地表达这种关系。因此这里，咱们在 account 组件中又添加了一个 router-view 标签，用来渲染出嵌套的组件内容。同时，经过在定义 routes 时在参数中使用 children 属性，从而达到配置嵌套路由信息的目的。

PS：以 / 开头的嵌套路径会被看成根路径，而咱们的 login 组件和 register 组件都是包含在 account 中，因此这里直接定义 path 参数便可。

总结

这一章主要是介绍了如何使用 Vue Router 在 Vue 中构建咱们的前端路由。在实际开发中，对于一个路径，可能会对应到多个组件，这时，如何将多个组件绑定到一个路径下，就是咱们须要解决的问题。另外，在实际使用中咱们会遇到路由传参，可能会由于 hash 路由不漂亮，从而准备采用 history 路由，对于这些需求的实现，将放在下一章中进行学习。

参考

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712