路由与页面间导航

2019-06-27

字数统计: 1.4k字 | 阅读时长≈ 5分

从思维导图到网站地图

设计原型

vue-router

前端路由是直接找到与地址匹配的一个组件或者对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种做法，一是在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航；二是使用HTML5的window.history功能，使用URL的Hash来模拟一个完整的URL。

安装

npm i vue-router -D

打开main.js文件并加入以下的引用：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

路由配置

路由的模式

传统意义上路由是由多个URL或者URL规则组成的，对服务端而言，网页的访问是无状态的，称之为服务器路由。而浏览器的History API则给予了一种实现可状态化页面的问题，因为页面的跳转（URL的改写）并不会出现页面刷新，这样一来状态就被维护在浏览器的History的内部状态存储之中。

我们创建VueRouter实例时有那个了mode:history的参数，这个值的意思是使用history模式，这种模式充分利用了history.pushState API来完成URL跳转而无须重新加载页面。

如果不是使用history模式，当访问home的时候地址就会变为：

1
2
3

http://localhost/#home

http://localhost/home

这就是history模式与hash模式的区别了。
·Hash：使用URL hash值来作为路由。支持所有浏览器，包括不支持HTML5 History API的浏览器。
·History：依赖HTML5 History API和服务器配置。查看HTML5 History模式。
·Abstract：支持所有Javascript运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。

base为应用的基路径。例如，整个单页应用服务在/app/下，那么base就应该设为“/app/”,当你在HTML5history模式下使用base选项之后，所有的to属性都不需要写基路径了。

路由与导航

vue-router提供了两个指令标签（directive）组件来处理这个导航与自动渲染逻辑；

1
2
3

·<router-view>——渲染路径匹配的视图组件，它还可以内嵌自己的<router-view>，
根据嵌套路径渲染嵌套组件。
·<router-link>——支持用户在具有路由功能的应用中（点击）导航

输出指定元素

动态路由

应该先实现顶层页面还是实现所有的路由定义？
——先实现所有路由的定义。（因为路由是连接整个项目的主线，便于多人之间协作开发）

嵌套式路由

切页动效

Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入（entering）和退出（leaving）的过渡效果。

Vue官方的中文手册

·CSS类名-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
·CSS类名-enter-active：定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。
·CSS类名-leave：定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
·CSS类名-leave-active：定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

例如：

<template>
    <transition name="slide-fade">
        <router-view>
        </router-view>
    </transition>
</template>
<style>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-active {
        tranform: translateX(-430px);
        opacity: 0;
    }
</style>

导航状态样式

当用户点击Tabs上的任意一个标签组件时，组件应该进入一个“激活”的状态，显示为红色。这一点VueRouter也为我们想到了，在默认情况下当对应的路由匹配成功时，就会自动设置class属性值为.router-link-active，如果我们想要将“激活”状态样式类命名为active，可以通过active-class属性进行设置，例如：

<router-link :to="{ name: 'Home'}"
        tag="li"
        active-class="active">
    <div>
        <img src="../assets/images/home.svg">
    </div>
    <div>首页</div>
</router-link>

如果在页面上都是这样显式的声明，那么就需要在每个组件元素上都要写一次，这样就不DRY了。我们还可以有另一个选择，就是在VueRouter的全局配置上进行声明，直接将.router-link-active这个默认值改为active，在main.js文件内的VueRouter配置中加入以下的语句：

const router = new VueRouter({
    //... 省略
    linkActiveClass: "active",
})

通过linkActiveClass全局属性就能进行统一的设置了。

精确匹配与包含匹配

<router-link>添加“激活”状态样式类的默认依据是对URL地址的全包含匹配。
举个例子，如果当前的路径是/home，那么<router-link to="/">
也会被匹配并设置CSS类名。
想要链接使用“精确匹配模式”，则使用exact属性。在上面的例子中，
“Home”路由就必须以精确匹配模式，否则它的tab被点中后，
Home的tab会始终保持“激活”状态。

<!-- 这个链接只会在地址为/的时候被激活 -->
<router-link :to="{name: 'Home'}"></router-link>

History的控制

关于Fallback

本文作者： LQbank
本文链接： http://example.com/2019/06/27/路由与页面间导航/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！