45. Vue路由vue-router的基本使用

本文主要是介绍45. Vue路由vue-router的基本使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在使用vue-router之前，首先要认识一下前端路由和后端路由的区别概念。

什么是路由

后端路由:对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

例如：https://www.ximalaya.com/my/subscribed/
前端路由:对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

例如：https://www.ximalaya.com#/my/subscribed/ ，注意请求路由前面带上了hash(#号)
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

安装使用vue-router

想要知道如何安装使用vue-router，那么肯定要知道哪里查看官方文档。

vue-router官方文档：https://router.vuejs.org/zh/

vue-router安装文档：https://router.vuejs.org/zh/installation.html

根据文档，安装vue-router有以下三种方式。

直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定版本号或者 Tag。

在 Vue 后面加载 vue-router，它会自动安装的：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此 (手动安装)。

构建开发版

如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

vue-router的基本使用

上面提供了三种安装方式，我采用第一种方式进行安装以及使用演示。

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。下面是个基本例子：

1.直接下载 `vue-router.js`文件到本地

在浏览器访问 https://unpkg.com/vue-router/dist/vue-router.js

image-20200217230732421

将下载的vue-router.js 放入项目本地文件夹下：

image-20200217231138391

2.按照顺序导入`vue.js` 以及`vue-router.js`库

<!-- 导入vue.js库  -->
<script src="lib/vue.js"></script>
<!-- 导入vue-router -->
<script src="lib/vue-router.js"></script>

当导入了vue-router.js库之后，打开浏览器就会发现url的路径增加了#号，如下：

image-20200218173111809

3.创建两个组件，后续用来设置前端路由进行组件展示切换

创建一个登陆以及注册的组件，如下：

<script>        // 创建登陆组件loginvar login = {template: "<h3>登陆组件</h3>",}// 创建注册组件registervar register = {template: "<h3>注册组件</h3>",}// 创建vue的实例var vm = new Vue({el: '#app',data: {},methods:{},             // 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件components:{}})</script>

4.创建Vue-Router的路由对象，用来设置组件与前端路由的规则

image-20200218164603840

image-20200218164632177

<script>        // 1. 定义 (路由) 组件。// 可以从其他文件 import 进来// 创建登陆组件loginvar login = {template: "<h3>登陆组件</h3>",}// 创建注册组件registervar register = {template: "<h3>注册组件</h3>",}// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。var routes = [{ path: '/login', component: login },{ path: '/register', component: register }]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。var router = new VueRouter({routes // (缩写) 相当于 routes: routes})// 创建vue的实例var vm = new Vue({el: '#app',data: {},methods:{},             // 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件components:{},// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件router: router, })</script>

到这里已经写好了路由组件的相关内容了，那么下面就来看看如何在app中使用。

5.在主组件app中使用`router-view`展示路由组件

<div id="app"><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div>

那么上面写了这个router-view的标签有什么作用呢？下面来设置#路由来看看效果。

访问#/login

image-20200218181306479

访问#/register

image-20200218181330070

好了，写到这里可以看到根据不同的哈希路由，就可以展示不同的组件内容。

6.写两个a标签用来切换组件

上面是直接在浏览器上修改url地址的hash路径，下面写两个a标签来设置。

image-20200218201215538

按照我们已经开发习惯，a标签的链接基本设置为/login 和 /register，那么下面打开浏览器看看，能否正常跳转组件，如下：

image-20200218201743334

image-20200218201801950

可以看到在a标签直接设置跳转/login是无法正常前端跳转的。因为/login没有带#是不能访问到的。

给两个请求路径增加#，如下：

image-20200218202155774

打开浏览器点击a标签，如下：

image-20200218202229944

image-20200218202253857

此时能够正常显示路由对应的组件了。但是，难道每次设置链接的时候都要写一个#号吗？感觉挺麻烦的。有没有更好的写法呢？

当然有，下面来介绍一下router-link的使用。

router-link 的基本使用

为了不用像上面那些写a标签的跳转链接加上一个#号，vue框架提供了一个超链接标签router-link，怎么用？下面来看看。

7.写两个`router-link`实现`a`标签的跳转功能

image-20200218213154341

<div id="app"><a href="#/login">登陆</a><a href="#/register">注册</a><hr><router-link to="/login">登陆</router-link><router-link to="/register">注册</router-link><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div>

可以看到router-link设置跳转的路径并不需要写一个#号在前面。

打开浏览器查看一下效果，如下：

image-20200218213411568

可以从上面看到router-link默认会自动渲染为a标签，那么如果不想渲染为a标签，能否渲染为其他html标签呢？这个是可以的。

8.将`router-link`使用`tag`属性渲染为`span`标签

image-20200218215935565

打开浏览器查看如下：

image-20200218220157626

可以看到渲染为了一个span标签，那么能否点击切换组件呢？

当点击注册，则会跳至对应的组件，并且自动设置选中的class类router-link-exact-active router-link-active，而这种类其实就是可以用来做一下选中的样式变化的，这里先不深入。

image-20200218220415250

那么下面点击登陆这个span也是可以跳转组件的，如下：

image-20200218221244625

说明router-link不管被渲染为什么html标签，都具有跳转页面的效果。

重定向`rediect`的使用

1.存在的根路径问题

image-20200219213738063

那么能不能让访问 #/ 路径的时候，直接访问登陆组件的内容呢？

2.设置`/`路径显示登陆组件

image-20200219214750591

这样通过设置两个path路径指向组件login, 那么则可以显示登陆组件的内容，如下：

image-20200219214856648

这样写虽然可以显示登陆组件，但是两个路径去指向的话，感觉就不太好。那么此时就要使用路径重定向的功能了。

3.使用`rediect`设置重定向

image-20200219215359109

{ path: '/', redirect: '/login' },

浏览器当访问/路径的时候，自动跳至/login，如下：

image-20200219215725782

当按下回车，访问路径，如下：

image-20200219215800568

router-link设置高亮显示

在日常的菜单中，一般都会对选中的菜单设置高亮的效果，表示已经选中了这个菜单，那么在router-link中该如何设置这个效果呢？

首先来看看router-link选中之后，会有什么东西？

image-20200219223221790

可以看到，当被点击选中过，就会自动设置一个class为router-link-exact-active router-link-active, 那么就可以通过这设置的类来写样式，用来体现高亮的效果。

1.给`router-link-active`类设置选中的样式

image-20200219224121746

<style>.router-link-active{color: #0056B3;font-weight: 700;text-decoration: none;}</style>

在浏览器显示如下：

image-20200219224212556

image-20200219224236755

可以从上面看到，通过设置router-link-active类样式，达到选中效果的变化，那么能不能自定义一个类名呢？

当然是可以的，默认情况下就是router-link-active，下面来看看如何自定义。

2.查看选中`active-class`的定义

访问官网查看：https://router.vuejs.org/zh/api/#tag

active-class

类型: string
默认值: "router-link-active"

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

3.自定义选中的class类

从上面的定义看出了可以通过路由的构造选项linkActiveClass来进行配置，如下：

image-20200219225026594

// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。var router = new VueRouter({routes, // (缩写) 相当于 routes: routeslinkActiveClass: "myactive", // 自定义选中的class})

在上面设置好了选中的自定义class为myactive，打开浏览器确认如下：

image-20200219225124102

可以看到显示为 myactive

4.设置自定义的class类样式效果

image-20200219225242125

浏览器显示效果如下：

image-20200219225303369

可以看到已经达到自定义class的选中样式效果了。

为路由切换增加动画效果

上面已经写好了路由的基本使用，那么现在再来一个动画效果。

1.使用`transition`包括`router-view`，并且设置动画的mode为`out-in`

image-20200219230240511

2.设置动画的样式

image-20200219230308494

3.浏览器显示的效果

image-20200219230342138

可以看到组件先out，后in的效果。

完成的实例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 导入vue.js库  --><script src="lib/vue.js"></script><!-- 导入vue-router --><script src="lib/vue-router.js"></script><style>.router-link-active,.myactive{color: #0056B3;font-weight: 700;text-decoration: none;}/* 设置动画效果 */.v-enter,.v-leave-to{opacity: 0;transform: translateX(9.375rem);}.v-enter-active, .v-leave-active{transition: all 1s ease;}</style></head><body><div id="app"><a href="#/login">登陆</a><a href="#/register">注册</a><hr><router-link to="/login" tag="span">登陆</router-link><router-link to="/register">注册</router-link><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><transition mode="out-in"><router-view></router-view></transition></div><script>        // 1. 定义 (路由) 组件。// 可以从其他文件 import 进来// 创建登陆组件loginvar login = {template: "<h3>登陆组件</h3>",}// 创建注册组件registervar register = {template: "<h3>注册组件</h3>",}// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。// 我们晚点再讨论嵌套路由。var routes = [// { path: '/', component: login },{ path: '/', redirect: '/login' },{ path: '/login', component: login },{ path: '/register', component: register }]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。var router = new VueRouter({routes, // (缩写) 相当于 routes: routeslinkActiveClass: "myactive", // 自定义选中的class})// 创建vue的实例var vm = new Vue({el: '#app',data: {},methods:{},             // 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件components:{},// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件router,  // 等价于 router: router})</script></body>
</html>

更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】吧：

image

这篇关于45. Vue路由vue-router的基本使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！