浅入深出Vue:路由
路由的概念在计算机界中的历史大概可以追溯到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
数组中有一个路由对象,这个路由对象定义了如下的路由:
-
url 对应根,即服务器web地址。
-
此路由的名称是
HelloWorld
,路由的名称可以用以路由间的跳转,但必须保证唯一。 -
此路由对应的组件是
HelloWorld
组件,这个组件在第三行代码中引入了。
以上三点也是定义一个路由对象的基本要素,第二点非必须。
定义子路由
现在我们有