路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层网络层中的定义。这里的定义大意是:在转发数据包时,根据数据包的目的地址进行寻址,从而将数据包发往指定的目的地。

在 Web开发中同样存在着路由的概念,在各式各样的前端 mvvm框架出来之前,普遍存在于后端。通俗的说法也就是 [module/]controller/action的组合,将 url映射到指定的 action中处理。现在在前端中同样存在着路由这一概念。

为什么需要路由

在以往的前端开发中,通常没有路由这一概念,这样就造成一个问题:

  • 前端是离散的,不可独立的(静态页面除外,它不需要上下文)。

脱离了后端的前端无法较好的构建一个完整系统,当然也有一些比较优秀的方案:

  • 单页应用,采用 ajax控制 dom节点以及动态修改页面内容

等等。

但不可否认的是,在没有路由这一概念的情况下,前端确实显得不够灵活,跳转页面时随处可见的路径硬编码。url 即物理路径。

为了完善前端开发,在后来的框架中,均引入了路由、控制器、视图等后端概念。借鉴成熟的东西来完善自身,这是非常便捷的一种方式。

因此在现在的前端开发中,路由也是必不可少的一环了。很多人被它的概念弄的晕头转向,让我们捋一捋,看看它的真面目。

路由是什么

前端中的路由更好理解。以 vue举例,vue-router会解析 url,将其映射到指定的 component进行渲染。因此,在这里我们给 vue中的路由一个通俗的、狭义的定义:

  • 一个 url,对应着一个具体的组件实例。

路由是对 url进行解析,看这个 url是否存在有与之匹配的组件去渲染。

路由如何使用

vue中分为三步:

1. 安装vue-router组件。

可以查看 package.json,看是否安装了 vue-router。没有的话安装一下即可。

vue-cli 3.x中,可以直接在左侧面板中的依赖里查看到,并且一键安装。

2. 使用vue-router

main.js中全局引入一下:

import Router from 'vue-router'

Vue.use(Router)

3. 定义路由

在这一步,我们要定义路由

即我们想让哪些 url解析到哪些组件上去,来看看官方的例子:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})

例子中的 routes数组中有一个路由对象,这个路由对象定义了如下的路由:

  1. url 对应根,即服务器web地址。

  2. 此路由的名称是 HelloWorld,路由的名称可以用以路由间的跳转,但必须保证唯一

  3. 此路由对应的组件是 HelloWorld组件,这个组件在第三行代码中引入了。

以上三点也是定义一个路由对象的基本要素,第二点非必须。

定义子路由

现在我们有 localhost/的路由了,如果再加一个 localhost/login的路由呢?

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children: [
{
path: 'login',
name: 'Login',
component: Login
}
]
}
]
})

只需要在对应的路由对象下添加 children数组即可,数组内的对象的 path只需填相对路由即可。这里的例子可是不能运行成功噢,哪怕实现了 Login组件也不能看到预期的效果。

还有一点最重要的需要注意:

  • 在子路由/嵌套路由的情况下,想要层层渲染到子路由/嵌套路由,必须在其上层路由对象的模板中,添加 <router-view>组件,让vue-router能继续往下渲染。

代码:

<router-view :key="$route.fullPath"></router-view>

很多童鞋就是被卡在这里了,还有另一种写法:

<router-view></router-view>

多级路由也是这么层层定义出来的。

路由间的跳转

在引入 vue-router之后,在组件中可以使用如下语句获取 vue-router实例:

this.$router

// 通过路由跳转,下面的代码会跳转到 localhost/login
this.$router.push('/login') // 通过命名跳转, 下面的代码同样会跳转到 localhost/login
this.$router.push({ name : 'Login' }) // 路由带参数跳转
this.$router.push({
path: '/login',
query: {
username: 'xxx',
}
}) // 命名路由带参数跳转
this.$router.push({
name: 'Login',
params: {
username: 'xxx',
}
})

上述在带参数跳转的例子中,需要着重注意的一点:

  • 当使用 path跳转时,参数只能使用 query,不能使用 params

也就是说,下面的代码是不能正常传递参数的:

this.$router.push({
path: '/login',
params: {
username: 'xxxx',
}
})

在视图中可以使用如下代码进行跳转:

<router-link :to="{ path: '/login'}">login</router-link>

重点:

  • 不管是 this.$router.push的参数,还是 router-linkto参数,它们都可以是一个路由对象

记住这一点,就可以随心所欲的玩转跳转了。

写在最后

路由这篇没有demo演示,因为路由这部分想要更好的结合实践来学习的话,最好利用实战来学习。

因此这里只讲述了路由的概念和基本用法,以及使用中常见的几个问题。

我们在入门篇会经常使用到它的,会有更多的机会去深入的了解它,深入篇也会对它进行一个更深入的了解:如何自动化生成路由。

浅入深出Vue:路由的更多相关文章

  1. 浅入深出Vue:前言

    浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...

  2. 浅入深出Vue:环境搭建

    浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...

  3. 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  4. 浅入深出Vue:工具准备之WebStorm安装配置

    浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...

  5. 浅入深出Vue系列

    浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...

  6. 浅入深出Vue:第一个页面

    今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...

  7. 浅入深出Vue:文章列表

    终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...

  8. 浅入深出Vue:代码整洁之封装

    深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...

  9. 浅入深出Vue:自动化路由

    在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...

随机推荐

  1. WPF 3D 平移模型+动画(桥梁检测系统)

    原文:WPF 3D 平移模型+动画(桥梁检测系统) 关于WPF 3D,网上有很多旋转的例子,但是关于平移的例子并不是太多.本文并非WPF 3D扫盲篇,因此需要对WPF 3D有一定了解,至少知道View ...

  2. 白平衡自己主动(AWB)算法---2,颜色计算

    本文说明了白平衡算法估计当前场景的色温过程. 色温计算的原理并不复杂,但要做到,还是一道,认真做好每一步,这需要大量的测试,和算法一直完好. 关于该过程首先简要: 1, 取的图像数据,并划分MxN块, ...

  3. c# wpf 利用截屏键实现截屏功能

    原文:c# wpf 利用截屏键实现截屏功能     最近做一个wpf程序需要截图功能,查找资料费了一些曲折,跟大家分享一下.     先是找到了这样一份代码:     static class Scr ...

  4. 更新EF(更新表 添加表…)

           

  5. Entity相互关系

    查看 1.图表(.edmx) Model First可以2.代码 内部包含对方(回溯) 1:1   1   2 1:N   3   4 N:M   5   6

  6. ASP .NET Response类型

    .ContentType .htm,.html Response.ContentType = "text/HTML"; .txt Response.ContentType= &qu ...

  7. C# 异步委托的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  8. 新浪API登录实例

    步骤一:添加网站 进入新浪微博开放平台,http://open.weibo.com/apps 进入“管理中心“,点击”创建应用”,选择“网页应用”,填写相应的信息后提交. 步骤二:Oauth2.0授权 ...

  9. Android零基础入门第13节:Android Studio配置优化,打造开发利器

    原文:Android零基础入门第13节:Android Studio配置优化,打造开发利器 是不是很多同学已经有烦恼出现了?电脑配置已经很高了,但是每次运行Android程序的时候就很卡,而且每次安装 ...

  10. 关于这次KPL春季决赛的感悟

    QG 4:0 横扫AG超玩会,关于这一点想写一些自己的感悟,AG超玩会一直都是 4:0 横扫别人,这次在冠军赛被别人横扫,一点喘息的机会都没有.   1.QGhappy 跟本没把AG超玩会放在眼里,很 ...