「Vue|网页开发|前端开发」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转

本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站,包括页面扩展的逻辑,vue的官方路由vue-router的基本用法以及扩展用法

文章目录

  • 本系列前文传送门
  • 一、场景说明
  • 二、基本的页面扩展
    • 页面扩展是在扩什么
    • 创建新页面的代码,让页面内容变化起来
    • 对地址栏的地址格式进行一个优化
  • 三、避免页面频繁重新加载的路由用法
    • `<router-view/>`的作用
    • `<router-link>`标签
    • `<router-link>`标签作用
  • 四、路由用法扩展:更多定制化的路由配置场景
    • 动态路由实现详情页展示
  • 五、控制路由跳转的API

本系列前文传送门

  • 「Vue|网页开发|前端开发」01 快速入门:快速写一个Vue的HelloWorld项目

一、场景说明

我们在进行网站开发的时候,大多数都是需要有多个页面展示不同内容或者提供不同功能。每个页面单独启动一个项目的做法不太现实,实际业务中是一个项目中,一个页面对应项目代码中一个代码文件,然后通过浏览器地址的不同后缀(比如/home, /about, /prodcut, /center等等)来对应到不同的代码文件,进而在浏览器上展示不同的内容和提供不同的功能。

二、基本的页面扩展

页面扩展是在扩什么

在前文介绍如何快速开始一个项目时,我们已经探索到了页面渲染的逻辑,即:

  • 浏览器根据地址栏输入的地址,会得到一个path
  • 我们在代码里指明某个path对应某个component
  • 我们在component编写我们要展示的内容和功能

就完成了从代码到浏览器内容的关联和渲染展示。

当我们要跳转到一个新的页面的时候,一般地址栏的地址会跟随着变化,会有一个新的地址,即会有一个新的path
所以,当我们要增加一个新的页面的时候,其实就是新增一个从代码到浏览器地址的关联关系。即,在src/router/index.js

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
    }
  ]
})

改成

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
    },
    {
      path: '/about',
      name: 'About',
      component: HelloWorld 
    }
  ]
})

这里我们在routes的值中增加了一个元素,即增加了一个从浏览器地址后缀/about关联到代码HelloWorld的关联关系,只不过我们这里关联的代码没有额外写,而是直接再次用了HelloWorld页面的代码。

现在我们的项目就有两个页面了,可以分别通过浏览器地址栏输入http://localhost:8080/#/http://localhost:8080/#/about来访问两个页面。

由于我们使用了同样的代码来展示两个页面,所以看到的页面内容其实是一样的。打个比方说,如果我们的项目现在是一本两页的书,那么这两页的内容是一样的。

可以确定的是,我们现在确实是两个页面,而不是一个页面。如果需要验证这一点,可以把我们刚才的代码改动先注释掉或者删掉,然后直接访问http://localhost:8080/#/about,可以看到页面的内容其实跟HelloWorld页面内容不一样,而是下面的仅有一个logo图片的页面:
在这里插入图片描述

创建新页面的代码,让页面内容变化起来

现在我们需要编写一个新的代码来对应路径/about,使得浏览器展示我们想展示的内容。因为我们的代码是由框架生成的标准化代码,所以这件事变得很简单,我们可以这样操作:

  • 直接复制一份HelloWorld.vue代码副本
  • 然后将副本命名为About.vue
  • src/router/index.js中导入About
  • 再将路径/about对应的代码从HelloWorld改成About

这样我们就完成了两个路径对应两个页面,两个页面用的是不同代码。然后我们修改About.vue里面的内容,让我们可以直观地从浏览器展示的内容观察到这一点。
进入App.vue,然后修改底下msg变量的值

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello Vue World!'
    }
  }
}

改成

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'About Vue World!'
    }
  }
}

保存后,重新打开浏览器可以看到我们/about对应的页面内容已经发生变化:
在这里插入图片描述

至此,我们就完成了网站页面从单页面网站升级成多页面网站的过程~ (●ˇ∀ˇ●)

对地址栏的地址格式进行一个优化

我们可以看到我们的两个页面的地址栏输入是http://localhost:8080/#/http://localhost:8080/#/about,所以我们目前的地址栏格式是http://localhost:8080/#/XXXXX

这种格式其实我们在日常浏览其他网站的时候并不常见,更常见的格式是http://localhost:8080/about,也就是我们可以优化一下地址格式,尝试将#/从地址中移除。

要实现这一点我们只需要在src/router/index.js中,在创建router实例的时候,指定一个mode参数,如下:

export default new Router({
  mode: "history",
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

重新打开浏览器,就可以看到地址格式已经是我们希望的样子了:
在这里插入图片描述

三、避免页面频繁重新加载的路由用法

到这里,我们可以做一个回顾,我们在给一个网站"安装路由器"的时候都做了哪些事情?

  • 首先我们使用了vue的官方路由包vue-router,这个包在一开始初始化项目时通过命令行提示选择了Yes完成了安装。如果不是这样,则需要通过npm install vue-router进行安装。
  • 然后我们出于文件结构清晰的考虑,会有一个router文件夹,文件夹下是router的入口index.js(框架初始化时已经自动生成)。
  • router/index.js中生成了路由器Router实例,其中指定了浏览器地址(path)到代码(component)的关联关系,由此完成了引导浏览器根据地址栏输入的地址将项目中对应的代码渲染到浏览器中进行展示的工作。
  • 然后我们去扩展地址(path)跟代码(component)的关联关系来增加网站能够展示的页面数量。

至此我们接触了vue路由相关的概念:

  • 官方路由包:vue-router
  • 路由文件入口:src/router/index.js
  • 生成的路由器实例:Router()
  • 在项目应用中导入路由src/main.js[line:10] new Vue(el, router, components, template)
  • 在页面中使用路由:src/App.vue[line:4] <router-view/>

<router-view/>的作用

<router-view>就是在页面渲染的时候,通过地址栏的path在我们指定的路径 -> 代码的关联关系中找到需要渲染的代码,然后将代码的内容替换到<router-view>的位置上。通过这一点我们可以进一步理解我们目前看到的页面内容:

  • 我们在HelloWorld中定义了一些文本和一些超链接,所以渲染时<router-view>会替换成这些文本和超链接,于是我们便看到浏览器中的内容。
    在这里插入图片描述
  • 当我们输入一个在路径 -> 代码关联关系中没有指定的路径,比如/nothing,我们会看到文本和链接都不见了,取而代之的是一片空白,就可以理解成<router-view>没有找到要替换的代码,就是空,于是<router-view>的位置就是一片空白。
    在这里插入图片描述
  • /nothing页面中,虽然文本和超链接不见了,但是logo图片还在,我们去看这个logo图片代码的位置就可以知道,这是因为logo图片代码是在<router-view>上方单独的代码,而不是它去替换的内容,所以每个页面都能看到logo图片。

<router-link>标签

除了<router-view>标签之外,如果去看官网文档或者其他资料,一般会提到另一个标签叫做<router-link>

<router-link>其实就是替代原生的HTML超链接标签<a>存在的,写法如下:

<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>

<router-link>标签作用

<router-link> text <router-link/>当然不只是给<a> text </a>的另一种写法,必然是还有其他好处才会出现。

所以它的好处就是能够使得vue-router可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。减少页面的重新加载就可以提高网站的性能和用户在浏览和跳转过程中的体验,这才是我们去用<router-link>代替<a>所希望得到的。

四、路由用法扩展:更多定制化的路由配置场景

动态路由实现详情页展示

我们在实际开发过程中,一个页面展示的内容布局是不变的,只是页面的数据不同而已,比如:

  • 博客网站的博文详情页
  • 电商网站的商品详情页
  • 视频网站的视频播放页

关于详情页这种只是数据变化的页面,我们的实现方法一般是拿到数据之后将数据展示到对应的位置上。至于数据可以是在页面跳转前将数据传入,常见于我们说的MVC架构中;也可以是从网页请求中获取对应的数据参数,然后进行数据请求得到数据,常见于前后端分离的架构。

如果我们是从网页请求中获取的数据参数,则我们可以常见到如下两种请求方式:

  • 参数作为url请求传入:http://localhost:8080/user?user_id=1
  • restful的方式,作为路由的一部分,由路由逻辑按照指定模式去匹配获取:http://localhost:8080/user/1

如果要实现http://localhost:8080/user/1这种方式,我们可以可以使用vue-router的动态路由参数,将router的配置修改如下:

export default new Router({
  mode: "history",
  routes: [
    {
      // 动态字段以冒号开始
      path: '/user/:id',
      name: 'UserDetail',
      component: UserDetail
    }
})

除此之外,还有一些其他的常见用法:

  • 不同路径指向相同页面:

    • 比如//home(甚至/index)都指向HomePage
    • { path: '/', component: Homepage, alias: '/home' }
    • { path: '/', component: Homepage, alias: ['/home', '/index'] }
  • 嵌套路由:

    • 只替换某些部分的内容,公共内容不变,减少重复代码
    • /user/:id/profile:显示用户个人信息
    • /user/:id/posts :显示用户发布的文章
routes: [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: '/profile',
        component: UserProfile
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: '/posts',
        component: UserPosts
      },
    ],
  },
]
  • 懒加载:
    • 只有当路由被访问的时候才加载对应组件
    • 防止页面加载过慢以及构建应用时打包的js包过大
    • 不是懒加载的写法:import HelloWorld from '@/components/HelloWorld'
    • 懒加载写法一:const HelloWorld = ()=>import('@/components/HelloWorld')
    • 懒加载写法二(异步):{ path: '/', name: 'HelloWorld', component: resolve => require(['@/components/HelloWorld'], resolve) }

五、控制路由跳转的API

我们也可以通过在组件中调用Router API来实现路由的跳转、回退等功能。

  • 跳转到其他页面:

    • API写法:this.$router.push('/about')
    • 等价于<router-link>形式:<router-link :to="/about">跳转到About</router-link>
    • 等价URL: /about
  • 带参数跳转:

    • this.$router.push({ path: '/search', query: { keyword: 'vue' } })
    • 等价URL:/search?keyword=vue
  • 获取参数:this.$route.query.keyword // 得到值:vue

  • 带锚点hash(#)跳转:

    • router.push({ path: '/about', hash: '#team' })
    • 等价URL:/about#team
  • 使用params跳转

    • 可以让参数不显示在URL上,防止一些信息泄露
    • this.$router.push({ name: 'user', params: { username: 'aki' } })
  • 获取params:this.$router.params.username // 得到值: aki

  • 返回上一页:this.$router.go(-1)

  • 后退两页:this.$router.go(-2)

掌握了以上内容基本就可以解决实际业务开发中的大部分场景,第四部分的API不需要记忆,只需要记住可以通过编写代码逻辑的形式来控制路由即可。

快去试试搭建自己的多页面网站吧~

写文不易,如果对你有帮助的话,来一波点赞、收藏、关注吧~👇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/94898.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux内核源码分析 (3)调度器的实现

Linux内核源码分析 (3)调度器的实现 文章目录 Linux内核源码分析 (3)调度器的实现一、概述二、调度器数据结构1、task_struct中与调度有关的的成员2、调度器类3、就绪队列4、调度实体 三、处理优先级1、优先级的内核表示2、计算优先级3、计算负荷权重 四、核心调度器1、周期性调…

网络安全(黑客技术)学习手册

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

VBA技术资料MF48:VBA_在Excel中将列号与字母转换

【分享成果&#xff0c;随喜正能量】除非自己的认知获得了改变和刷新&#xff0c;否则&#xff0c;人们常说的“顺应自己的内心”&#xff0c;顺的不过是一颗旧心&#xff0c;一颗惯性的&#xff0c;充满了各种习性的套路之心。与“顺应自己的内心”恰恰相反&#xff0c;人要用…

自动化PLC工程师能否转到c#上位机开发?

成功从自动化PLC工程师转向C#上位机开发的经历可能因人而异&#xff0c;以下是一些分享的思路和建议&#xff1a;扩展编程技能&#xff1a;学习C#语言和相关的开发工具和框架&#xff0c;掌握语言的基础知识和常用的编程技巧。可以通过在线教程、培训课程、书籍等途径进行学习&…

c# modbus CRC计算器(查表法)

一、简介&#xff1a; 本案例为crc计算器&#xff0c;通过查表法计算出结果 1.窗体后台源代码 using Crc; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text…

利用SSL证书的SNI特性建立自己的爬虫ip服务器

今天我要和大家分享一个关于自建多域名HTTPS爬虫ip服务器的知识&#xff0c;让你的爬虫ip服务器更加强大&#xff01;无论是用于数据抓取、反爬虫还是网络调试&#xff0c;自建一个支持多个域名的HTTPS爬虫ip服务器都是非常有价值的。本文将详细介绍如何利用SSL证书的SNI&#…

AI助力智能安检,基于图像目标检测实现危险品X光智能安全检测系统

基于AI相关的技术来对一些重复性的但是又比较重要的工作来做智能化助力是一个非常有潜力的场景&#xff0c;关于这方面的项目开发实践在我之前的文章中也有不少的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a;《AI助力智能安检&#xff0c;基于目标检测模型实现…

Java面试题—2023年8月24日—YDZH

2023-08-24 10:54:28 北京 yī do zh h 答案仅供参考&#xff0c;博主仅记录发表&#xff0c;没有实际查询&#xff0c;不保证正确性。 面试题&#xff1a; 1、请你谈谈关于 Synchronized 和 lock ? 2、请简单描述一下类的加载过程?类加载器有几个种&#xff0c;分别作用是什…

DC电源模块不同的尺寸可以适应实际应用场景

BOSHIDA DC电源模块不同的尺寸可以适应实际应用场景 DC电源模块是现代电子设备的必备部件之一&#xff0c;其可提供稳定的直流电源&#xff0c;保证电子设备正常运行。DC电源模块尺寸的选择直接影响到其适应的应用场景及其性能表现。本文将从尺寸方面分析DC电源模块的适应性&a…

自动化测试工具Selenium的语法续.

OK&#xff0c;那么上篇博客我们介绍了如何搭建基于Javaselenium的环境&#xff0c;并且使用selenium的一些语法给大家演示了如何进行自动化测试的案例&#xff0c;那么本篇博客我们来继续学习selenium的一些其他的比较重要的语法&#xff0c;感谢关注&#xff0c;期待三连~ 目…

港联证券:游资爆炒中电环保,还有谁在蹭核污染防治概念?

8月28日&#xff0c;核污染防治概念股持续大涨&#xff0c;建工修复&#xff08;300958.SZ&#xff09;、捷强配备&#xff08;300875.SZ&#xff09;、东方园林&#xff08;002310.SZ&#xff09;、华盛昌&#xff08;002980.SZ&#xff09;等涨停。 中小市值的概念股成为游资…

SCI论文创新思路

SCI论文创新思路 一、 创新的分类1、算法创新2、架构创新3、迁移创新4、思想创新5、方法创新6、组合创新 二、组合创新的必要性三、组合创新的流程四、组合创新举例1、组合创新公式2、生活中的例子3、关于CV的例子4、魔改的方法 一、 创新的分类 1、算法创新 比如提出CNN、LS…

PDF如何转ppt?PDF转ppt的方法

PDF是一种广泛应用于文档传输和存储的格式&#xff0c;然而&#xff0c;在某些情况下&#xff0c;我们可能需要将PDF文件转换为PPT&#xff0c;以便更加灵活地编辑和展示内容。那么&#xff0c;PDF如何转ppt呢?在本文中&#xff0c;我们将介绍几种常用的方法和工具&#xff0c…

Java“牵手”1688商品跨境属性数据,1688API接口申请指南

1688平台商品详情跨境属性数据接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取1688商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片&#xff0c;重量&#xff0c;详情描述等详细信息 。 获取商品详情接口API是一种用于…

Linux 终端命令行 产品介绍

Linux命令手册内置570多个Linux 命令&#xff0c;内容包含 Linux 命令手册。 【软件功能】&#xff1a; 文件传输 bye、ftp、ftpcount、ftpshut、ftpwho、ncftp、tftp、uucico、uucp、uupick、uuto、scp备份压缩 ar、bunzip2、bzip2、bzip2recover、compress、cpio、dump、gun…

ant-vue1.78版a-auto-complete表单自动搜索返回列表中的关键字标红

a-auto-complete表单自动搜索返回列表中的关键字标红 通常在做关键字标红的场景&#xff0c;都是后端返回html结构&#xff0c;前端直接渲染实现&#xff0c;但是如果需要前端处理的话&#xff0c;实现也是很简单的&#xff0c;接下来我直接上应用场景吧 应用场景就是通过关键…

EXCEL数据处理

1. 自定义数字格式 选中数字--右键--设置单元格格式--自定义--shang ↑ 2.条件格式 如果。。。。就。。。。 选中某列--开始--条件格式--突出显示--大于/小于/等于。。。--设置为&#xff08;可选自定义格式&#xff09; 选中区域--条件格式--清除规则--清除所选单元格的规…

Java中线程的7大状态的基本介绍

在线程的生命周期中&#xff0c;有七种不同的状态&#xff0c;这些状态描述了线程在不同阶段的情况。Java中线程的七大状态如下&#xff1a; 新建&#xff08;New&#xff09;&#xff1a; 当创建一个线程对象时&#xff0c;线程就处于新建状态。此时&#xff0c;线程已经被创建…

矿业配电柜监测,真的如此难以克服?

当今工业和商业领域中&#xff0c;电力作为生产和运营的基石&#xff0c;无可替代。在这个背景下&#xff0c;配电柜监控的重要性日益凸显。 配电柜作为电力系统的核心组成部分&#xff0c;其稳定运行直接关系到生产的连续性、安全性以及能源的高效利用。通过配电柜监控&#x…

1 Hadoop入门

1.Hadoop是什么&#xff1f; (1)Hadoop是一个由Apache基金会所开发的分布式系统基础架构。 (2)主要解决&#xff0c;海量数据的存储和海量数据的分析计算问题。 (3)广义上来说&#xff0c;Hadoop通常是指一个更广泛的概念——Hadoop生态圈 2.Hadoop的优势 3 Hadoop组成 4 HDF…