vuejs学习与总结——路由基础篇

最新推荐文章于 2023-03-04 22:46:13 发布
最新推荐文章于 2023-03-04 22:46:13 发布
阅读量335 收藏
点赞数
分类专栏： Vuejs 前端学习 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42711899/article/details/105854050
版权
本文介绍了前后端发展历程，重点讲解了前端路由阶段，特别是Vue.js的路由插件vue-router。在SPA页面中，前端路由允许改变URL而不刷新整个页面，通过URL的hash或HTML5 history API实现。vue-router是Vue.js官方的路由插件，用于构建单页面应用，它与Vue深度集成，基于组件和路由映射。文章还详细阐述了vue-router的安装、使用方法及<router-link>组件的应用。
摘要由CSDN通过智能技术生成

前后端发展阶段

后端路由阶段

  • 我们知道，早期的网站开发整个HTML页面是由服务器端来渲染的

  • 服务器直接生产渲染好对应的HTML页面，返回个哭护短进行展示

  • 后端路由

    • 一个网页有着自己对应的网址，也就是url
    • url会发送到服务器端，服务器会通过正则对该URL进行匹配，并且最后交给一个controller进行处理
    • controller进行各种处理，最终生成HTML或者数据，返回给前端
      当我们页面中需要请求不同不同的路径内容时，交给服务器来处理，服务器渲染好整个页面，并且将页面返回个客户端，这种情况下渲染好的页面，不需要单独加载任何的js和css,可以直接交给浏览器来展示，这样有利于SEOd的优化

  • 缺点

    • 一种情况是整个页面的模块都有后端人员来编写和维护
    • 另外一种情况就是前段开发人员如果要开发页面，需要通过PHP和java等语言来编写页面代码
    • 而且通常情况下，HTML代码和数据以及对应的逻辑会混淆爱一起，编写和维护都十分困难

后端渲染

在这里插入图片描述

前后端分离阶段

后端只负责提供数据，不负责任何阶段的内容

  • 随着Ajax的出现，有了前后端分离的开发模式
  • 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过javaScript将数据渲染到页面中
  • 这样做的最大的优点就是后端的责任的清晰，后端专注于数据上，前端专注于交互和可视化上
  • 并且当移动端（IOS/android）出现后，后端不需要进行任何的处理，依然可以使用之前的API即可
  • 目前很多网站都蚕蛹这个模式进行开发

前端渲染

在这里插入图片描述

前端路由阶段（spa页面）

单页面富应用阶段

  • 其实SPA最主要的特点就是在前后端分离的基础上加上了一层前端路由
  • 也就是运用前端来维护一套路由规则
  • 整个页面只有一个html页面
    前端路由的核心：
    • 改变URL，但是页面不进行整体的刷新
    • 如何实现呢？

url的hash和HTML的history

  • 方法一： URL的hash
    • URL的hash也就是我们所说的锚点（#），本质上是改变window.location的href属性
    • 我们可以通过直接赋值loactipn.hash来改变href,但是页面不发生刷新
      在这里插入图片描述
  • 方法二：HTML中的history模式：pushState
    在这里插入图片描述

方法三：：HTML中的history模式：replaceState
在这里插入图片描述

认识vue-router

简介

目前前端三大主流框架，都有着自己的路由实现。现在主要介绍的是：vue-router

  • vur-router是vuejs官方的路由插件，他和vue.js是深度集成的，适合于构建单页面应用
  • vue-router是基于路由和组件的
  • 在vue-router的单页面应用中，页面的路径改变就是组件的切换

安装和使用路由

安装

因为之前学过了webpack，我们可以使用工程化的方式进行开发的
所以后续时，我们直接npm来安装路由即可
步骤：

  • 1 安装 vur-routernpm -router --save
  • 2在模块化工程中使用它（因为这是一个插件，我们可以通过vue.use()来安装路由）
    • ①导入路由对象，并且盗用vue.use(vuerouter)
    • ②创建路由实例，并且传入路由映射配置
    • ③在vue实例中挂载创建的路由实例

使用

步骤：

  • 创建路由组件
  • 配置路由映射：组件和路径映射关系词
  • 使用路由：通过：<router link >和<router-view>

<router link >和<router-view>:
<router link >: 该标签是一个vue-router中已经内置的组件，它会被渲染成一个标签
<router-view>：该标签会更具当前的路径，动态渲染出不同的组件，网页的洽谈内容，比如顶部的标题导航，或者底部的一些版权信息等会和 <router-view>处于同一个等级
在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

< router link >属性补充

属性作用
:to用于指定跳转的路径
tag可以指定< router-link>之后渲染成什么样式，
replacereplace不会留下history记录，所以指定replace的情况下，后推荐不能返回到上一个界面中
active-class当< router-link> 匹配成功时，会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称【在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类，但是通常不会修改类的属性，会直接使用默认的router-link-active即可】

具体实现如下：
在这里插入图片描述

原来是小柒
关注
专栏目录
Vue.js之路由（router）
u011573295的博客
07-27 586
一、router简介 在后端程序中，我们是使用的servlet或者springMVC来匹配前端的http请求，并响应相关的数据发送给前端。 在前端程序中，一个单应用程序，通过一个hash（#号）改变来切换页面的展示。 http://localhost:63342/mywebpack/index.html#/login http://localhost:63342/mywebpack/index.html#/register 前端路由的优点在于，我们只是展示页面可以不需要通过http来请求后端响应，
vue.js基础还不会？——看这篇文章就够了
web15085181368的博客
03-03 286
知识点： vue.js介绍 指令 修饰符 计算属性 侦听器 过滤器 生命周期 组件 路由 一、vue.js介绍 vue是一套用于构建用户界面的渐进式框架 vue的核心只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合 二、指令 （一）、指令 本质就是自定义属性 VUE中指令都是v-开头 （二）、内置指令 1、v-cloak 防止页面加载时出现闪烁问题 2、v-text v-text指令用于将数据填充到标签中，作用与插值表达式，但是没有闪动问题 如果数据中有html标签会将html标签一并输出
vue学习-路由
5big的博客
01-02 333
路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用。Vue.js 路由需要载入 vue-router 库 直接下载 https://unpkg.com/vue-router/dist/vue-router.js npm 这里是淘宝镜像 cnpm install vue-router 简单例子： Vue.js + vue-router 可以很简单...
VueJS 之路由
两个月亮
02-05 558
在 VueJS 中，路由可以理解为 Hash 地址 与 组件 的映射关系。由于 VueJS 构建的是单页面应用程序，在构造具有如下效果的页面时，无法直接切换页面（因为仅有一个页面），但可以通过切换组件来达到相同的效果。路由在 VueJS 及 Web 后端中的概念稍有不同，但都表示某两者之间的映射关系。锚点是网页制作中超级链接的一种，是一种能够定位当前页面的元素的超级链接。
Vue.js 路由
wang_zhao_的博客
09-25 1655
路由1. vue-router 基本使用安装使用说明路由的默认路径修改为 history 模式router-link 补充tagreplacelinkActiveClass代码路由跳转动态路由路由懒加载懒加载效果懒加载方式2. vue-router 嵌套路由3. 参数传递4. 导航守卫5. keep-alive 1. vue-router 基本使用        vue-router 是 Vue.js 官方的路由插件，适合用户构建单页面应
学习前端路由和vue-router笔记
weixin_33709609的博客
02-01 107
前端路由原理本质就是监听 URL的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式 hash history www.test.com/##/ 就是 Hash URL，当##后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到URL 的变化，从而进行跳转页面。 vue-router hash实现源码（完整源...
在vue项目上使用阿里qiankun ——项目通讯篇（二）
前端李小白的博客
08-08 1946
通讯方式主要运用的qiankun提供的通讯api initGlobalState 以及vuex动态添加模块的方法 registerModule 1、在qiankun文件夹下创建share.js /* * @Author: Hzh * @Date: 2021-05-07 16:02:48 * @LastEditTime: 2021-07-22 14:52:57 * @LastEditors: Hzh * @Description: */ import Vue from 'vue' import
vuejs+koa2+mysql全栈开发个人博客(一) —— 总体介绍
帕尼尼的博客
04-26 5602
这个系列的博客我会详细的介绍vuejs+koa2+mysql全栈开发个人博客的技术要点。 技术要点一 登录状态储存 技术要点二 页面访问权限 技术要点三 后台操作权限 版权申明 这个项目是我fork了某位大神的开源git项目,并在其基础上进行的开发 在线地址 帕尼尼的个人博客 Vuejs存在首屏加载问题，虽然我做了部分优化，但加载出来仍需要10秒左右 项目地址 g...
vue基础知识笔记（二）—— 组件
最新发布
weixin_51341611的博客
03-04 1158
vue基础知识笔记——组件详解，持续更新中。
vue-router入门教程和总结1
08-03
接下来是核心部分 —— 路由配置。在 `routes` 数组中定义各个页面的路由，包括 `path`（访问路径）、`name`（可选，用于命名路由以便在代码中引用）、以及 `component`（对应的组件）。组件可以通过常规导入或懒...
Vue.js路由
些许就好丶的博客
08-08 600
简单路由<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <script src="../lib/vue-router.js" type="text/java
Vue.js——路由
想太多的学习日志
03-13 219
本篇学习目的 能够说出什么是路由 能够说出前端路由的实现原理 能够使用Vue-Router实现前端路由 能够实现嵌套路由，动态路由 能够实现命名路由以及编程式导航 理解并实现后台管理案例 1.路由的概念 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 路由...
Vue.js的路由
实践求真知
11-22 151
一 锚点的概念 案例：百度百科 特点：单页Web应用，预先加载页面内容 形式：url#锚点 二 路由的作用 Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。 通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA） 三 路由实例 创建文件夹router_pro 1 复制js资源 vue.min.js vue-router.min.js 2 创建 路由.ht
Vue.js路由基础总结
小满的博客
12-13 171
路由是一直在用的东西但没有系统的看过官方的文档，有时候想看文档，官方的路由模块又一直卡。今天总算不卡了，一口气看完顺便写个总结。以后忘了就不用再去官网看了，直接看自己总结的。 是写给自己看的所以有些点我觉得自己不会忘就没写 路径传参的一种方式 一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 ...
vuejs基础之路由
上善若泪
11-03 681
文章目录1 路由定义1.1 前后端路由区别：1.2 URL中的hash(#)2 安装方式3 使用路由3.1 路由对象3.2 路由对象挂载vue对象3.3 页面中路由组件3.3.1 路由展示3.3.2 路由跳转3.3.2.1 使用router-link3.3.2.2 使用router-link中默认样式3.3.2.3 不使用router-link中默认样式3.3.3 路由动画3.4 路由中参数3.4.1 query中获取3.4.2 params中传参3.5 路由的嵌套3.6 路由使用命名视图 1 路由定义 1
VUE.JS的路由配置
PG_FTT的博客
09-07 500
介绍 路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件 安装 npm install vue-router 配置 在src文件新建文件夹router用来存放路由器的配置文件 在routes.js中引入所需要展示的页面 配置一级路由路径 图中Test02为引入的页面，名称与上方import的值对应 path为定...
VUE.js的路由（vue-router）及基本使用
wanglingli95的博客
02-16 5646
任务1：什么是前端路由 1.1 vue-router 的理解 vue-router是vue .js官方提供的一套专用的路由插件库，专门用来实现 SPA 应用。 1.2 对 SPA 应用的理解 单页 Web 应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 数据需要通过 ajax 请求获取。 1.3 什么是路由 一个路由就是一组映射关系（key - value），key 为路径, v
vuejs 配置路由
qq_25635139的博客
02-19 1858
vuejs 路由加载 1, 安装    npm install --save vue-router 2, 引用    import VueRouter from 'vue-router' 3, 配置路由文件    var router = new VueRouter({    routes:[     {       path:"/hello",       component:HelloW...
IP/IPX路由基础详解：配置、协议与管理
本资源详细介绍了网络IP/IPX路由的基础知识，包括五个主要章节。首先，第一章"基本知识"涵盖了路由器的配置途径，如通过Console口、AUX口、远程电话网、TCP/IP网络的telnet配置，以及使用网管工作站进行监控和配置。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值