vue全家桶之路由vue-router

最新推荐文章于 2023-09-21 19:54:11 发布
最新推荐文章于 2023-09-21 19:54:11 发布
阅读量184 收藏
点赞数
分类专栏： vue 文章标签： vue-router  全家他桶 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45663264/article/details/103019976
版权

SPA （ single page App ） 单页面应用

多页面应用 有多个html文件，通过a标签的连接联通各个页面
缺点
开发起来太冗余，编译、压缩很耗时间
页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏
单页面应用

vue-router的优点

不需要刷新页面，因为它就是一个页面
这个页面内容在切换
单页面内容之间的切换要想实现我们就是用路由了
如今我们的app、后台管理系统 主要的开发形式就是spa

vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home
history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】
hash/history 常用于浏览器端，abstract用于服务端

路由的组件

在这里插入图片描述

路由的页面配置

在这里插入图片描述
个人喜好的话会单独将模块分开

在这里插入图片描述

谢小妞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SPA项目搭建及嵌套路由
m0_67477525的博客
09-06 605
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：注1：xxx 为自己创建项目的名称注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境build文件夹：这个文件夹主要是进行webpack的一些配置webpack基础配置,开发环境,生产环境都依赖webpack开发环境配置webpack生产环境配置build.js 生产环境构建脚本。
看完这一篇，彻底搞懂单页面应用路由
厦门在乎科技
09-01 585
单页面应用特征 假设：在一个 web 页面中，有1个按钮，点击可跳转到站内其他页面。 多页面应用：点击按钮，会从新加载一个html资源，刷新整个页面； 单页面应用：点击按钮，没有新的html请求，只发生局部刷新，能营造出一种接近原生的体验，如丝般顺滑。 SPA 单页面应用为什么可以几乎无刷新呢？因为它的SP——single-page。在第一次进入应用时，即返回了唯一的html页面和它的公共静态资源，后续的所谓“跳转”，都不再从服务端拿html文件，只是DOM的替换操作，是模（jia）拟（zhu...
【Vue】使用vue-cli搭建SPA项目的路由，嵌套路由
最新发布
无法自律的人的博客
09-21 1074
Vue CLI 是一个基于 Vue.js 的官方脚手架工具，用于自动生成vue.js+webpack的项目模板，它可以帮助开发者快速搭建 Vue.js 项目的基础结构，并提供了一系列的开发工具和配置选项。Vue CLI 提供了命令行界面和图形化界面两种方式，开发者可以根据自己的喜好选择使用。使用 Vue CLI，可以轻松进行项目初始化、管理依赖、开发调试、构建打包等常用开发任务，简化了 Vue.js 应用的开发流程，提高了开发效率。创建命令如下：xxx为自己创建项目的名称必须先安装等一些必要的环境。
对 SPA 应用的理解+路由的理解+路由的基本使用+路由的几个注意点
weixin_47075145的博客
10-12 641
1. 一个路由就是一组映射关系（key - value）2. key 为路径, value 可能是 function 或 component。
Vue单页面应用
weixin_44434230的博客
11-06 1279
** 1. SPA是什么 ** 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来...
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
解决vue-router 嵌套路由没反应的问题
10-14
原因在于，Vue Router中的嵌套路由需要父路由有一个对应的组件，该组件中包含一个`<router-view>`标签，用于渲染子路由对应的组件。在原始的配置中，`/course`路由没有指定组件，因此Vue Router无法找到放置子路由...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
SPA简介及路由
weixin_60269711的博客
04-30 617
SPA 1. SPA是什么 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 优势 ...
SPA 中前端路由基本原理与实现方式
FareBlog
12-13 5486
通常 SPA 中前端路由有2中实现方式，本文会简单快速总结这两种方法及其实现： 修改 url 中 Hash 利用 H5 中的 history Hash我们都知道 url 中可以带有一个 hash， 比如下面 url 中的 page2https://www.abc.com/index.html#page2window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件： 直接更
MPA（多页面模式）与SPA（单页面模式）
War__Tiger的博客
06-14 617
MPA与SPA
vue =＞ vue项目打包上线工作
Write less，do more
03-17 313
打包之前的路由模式 **目标**配置打包之前的路由模式 在SPA单页应用中，有两种路由模式 hash模式 ： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器 history模式：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器 开发到现在，我们一直都在用hash模式，打包我们尝试用history模式 改成history模式非常简单，只需要将路由的mode类型改成history即可 const createRouter = () => new Router({ m
Vue全家桶之 router(路由)
m0_57002951的博客
04-14 672
定义：vue router 是vue js 官方路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌 通过使用vue Router 可以将现有的Vue开发变得更加灵活，他可以根据前端请求的url不同对应在页面中展示不同的组件
SPA前端路由的原理与实现
Luckyzhoufangbing的博客
02-15 935
（一）什么是SPA SPA：single page application 的简写～（单页应用） 简单的说，SPA就是一个web项目只有一个html页面，一个页面一旦加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转，取而代之的是利用JS动态的变换html内容，从而来模拟多个视图间的跳转。 SPA只有一个html文件～ （二） 什么是路由 路由是根据不同的 url地址 展...
单页web应用（spa）内部路由原理
limingxiaojie的博客
09-06 308
（用户只需要加载一次页面就可以不再请求，当点击其他子页面时只有相应url改变而不会重新加载） 可以将路由的实现分为两部分 1.更新URL页面不刷新 2.监听URL的变化，执行页面替换逻辑 两种实现方法 1.history.pushState，replaceState等触发popState事件 https://blog.csdn.net/cvper/article/details/794...
在spa(单页面应用)开发中，点击侧边栏当前路由来刷新页面的两种方案（业界推荐使用的方案）
DLGDark的博客
11-28 769
背景： 在用 spa(单页面应用) 这种开发模式的之前，也就是多页面开发模式下，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。 如今： 大多都是spa这种，但 spa 就不一样了，当用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的...
【Vue的路由，SPA概念】
旺旺的博客
08-03 504
目录前言SPA的概念路由的创建路由的使用router-link的相关属性replaceappend渲染总结 前言 本章是为了以后实现前端页面的搭建而写的， 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web，有很大的缺陷。 那么就必须了解一下Vue的路由设置。 SPA的概念 总的而言，我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。 那么这样有什么缺点呢...
深入理解vue路由的使用
12-11
接下来，我们创建一个新的VueRouter实例，这是管理所有路由的核心对象。 3. **映射路由** 使用`router.map()`方法将URL路径与对应的组件进行映射。在这里，我们把'/home'映射到Home组件，'/about'映射到About组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值