路由的概念在计算机界中的历史大概可以追溯到 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 组件, 这个组件在第三行代码中引入了.
以上三点也是定义一个路由对象的基本要素, 第二点非必须.
定义子路由
现在我们有 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-link 的 to 参数, 它们都可以是一个路由对象
记住这一点, 就可以随心所欲的玩转跳转了.
写在最后
路由这篇没有 demo 演示, 因为路由这部分想要更好的结合实践来学习的话, 最好利用实战来学习.
因此这里只讲述了路由的概念和基本用法, 以及使用中常见的几个问题.
我们在入门篇会经常使用到它的, 会有更多的机会去深入的了解它, 深入篇也会对它进行一个更深入的了解: 如何自动化生成路由.
来源: https://www.cnblogs.com/By-ruoyu/p/11153392.html