【精讲】vue框架 路由（hash及history）区别、ui组件库

最新推荐文章于 2023-01-07 18:55:14 发布
最新推荐文章于 2023-01-07 18:55:14 发布
阅读量376 收藏 1
点赞数 2
分类专栏： vue/react笔记/常见bug 前端 vue框架 文章标签： 前端 javascript 开发语言
关注博主，为您提供更优质的作品与最全的知识内容
本文链接：https://blog.csdn.net/m0_59505309/article/details/126413171
版权
本文详细讲解了Vue框架中hash和history模式的差异，包括它们在地址栏的显示、兼容性和使用场景。同时，介绍了Vue Router的<router-link>和<router-view>组件的关键属性。在UI组件库部分，推荐了适用于移动端和PC端的Vant、Cube UI、Mint UI、Element UI和IView UI。
摘要由CSDN通过智能技术生成

第一部分：路由（hash及history）区别

hash与history写在的位置：（写在index.js中） 

hash与history的区别：

使用hash在地址栏中会出现 / # / 不美观 但是兼容性好，而history在地址栏中不会出现/ # / 但是兼容性略差

3：使用路由

该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签。

<router-link to="/about" active-clas

了解本专栏 订阅专栏 解锁全文 超级会员免费看
共创splendid--与您携手
关注
专栏目录
订阅专栏
声明式导航＜router-link＞：解决a标签自带的默认样式
YY的博客
11-30 4325
声明式导航原理
vue router-view使用详解（vue2）
热门推荐
蓑笠翁
08-14 9万+
vue2 routerView使用详解
python sqlite3.OperationalError: unable to open database file
puhuihui的博客
11-23 1989
路径问题： conn=sqlite3.connect("G:\Python\douban\movie250top.db")
Vue路由底部导航图片点击切换（绝对经典）
weixin_43540973的博客
08-17 2338
Vue路由底部导航图片点击切换（绝对经典） 需求：实现图标点击进行切换，（使用场景：京东图标底部导航的切换显示） 我这边为大家写出了两种方法： 1、为图片添加点击事件，在点击事件中改变图片地址 1.1、在app组件中添加显示图片代码 <router-link to='/fruits'> <img :src="fruitsimg" @click="fruitsclick" width="50px height: 50px;">水果</router-link>
Element-UI+Vue实现主页布局——侧边栏用户布局（上）
weixin_51351637的博客
10-05 7839
我们首先来看按钮以及文字提示的参数，接下来我们会有用处
vue同一组件视图 点击不同路由 渲染不同img图片
小羽向前跑
04-11 1144
最终效果： 组件所有代码： <template> <div class="detailsBox"> <div class="detailsLeft"> <div class="produbox"> <img :src="getUrl"> ...
nginx 部署单页react app 路由设置
世幻水的博客
04-16 626
今天要部署create react app 开发的网站，发现在页面中点击<Link to=""></Link>标签可以正常跳转。但是直接在路由中输入地址，进行非/路径的访问就会出错！！！ 问题原因 直接讲nginx 设置成静态容器，输入路由会被映射成文件！！！ 解决方案 在nginx.conf 中将添加每一个前端路由的匹配，并把他们全部定位到index.html 上！ 例子 假设有这样的前端路由，我们设置了/article, /uploadd, /login等六个界面 则其对应
Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案
最新发布
qq_59389108的博客
01-07 5万+
其细致的报错为：Module not found: Error: Can't resolve './images/logo.png' in 'xxx'2：在非路由组件中的style下采用了less样式，而没有下载less相关依赖。在遇到报错时应该仔细阅读报错提示，这样解决起来也不会没有头绪。1：在非路由组件中出现了图片路径，而路由根组件并未导入该图片。根据报错提示反应的情况是：找不到模块：错误：无法解析。在此处我们谈论一下解决该类报错的几种方法。解决方案：在非路由组件下导入该图片。
Vue-SuperSlide(SuperSlide component for Vue)
weixin_34194087的博客
02-26 1054
Vue-SuperSlide Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本，API 配置及使用方法与 SuperSlide 几乎一致，让你能够便捷的在 Vue 工程中使用 SuperSlide。 简介 关于 SuperSlide 的详细介绍可以到 SuperSlide 官方网站 - 大话主席...
vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕
scarlett1017的博客
03-17 9450
在做项目的时候，想要实现背景图片将整个页面铺满，等内容变多，高度超过屏幕高度的时候，背景图片仍然能够完全铺满。 第一种方式：（不是想要的） 第一种情况就是最外层设置一个div盒子，宽度100%，高度100vh。高度100vh，也就是占整个屏幕高度的100%。然后将图片设置成背景图片。背景图片设置100%的高度和宽度。 但是这种方式，它的高度就永远都是屏幕的高度，当屏幕右边出现滚条的时候，拉动，下面那一部分就是没有背景图片的 第二种方式：（不是想要的） 就是给高度设置auto。auto就是通过盒子里面的东西
Vue Router图文详细教程
小菜吉的博客
11-05 491
tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a> replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
yangyangdt的博客
01-05 2799
vue3中按vue2做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。因为在vue2中...
如何使用router-link对象方式传递参数？
草巾冒小子的博客
05-11 7万+
如何使用router-link对象方式传递参数？ 疑问：（判断和传参） 点击导航栏目，js如何判断自己点击的是哪个具体栏目？ 它们是如何传参的？ 效果图解说： A. 点击选择【屈原“查看详情”】之前 B. 点击选择【屈原“查看详情”】之后 要点总结： 在vue-router中，有两大对象被挂载到了实例this； $route（...
router-link使用详解
weixin_43905830的博客
05-06 3万+
router-link组件的属性 to、replace、append、tag、active-class、exact、event、exact-active-class。 属性介绍 1、to（必选参数）：类型是string/location //字符串 <router-link to="path（路径）">AAAA</router-link> //对象 <router-...
前端应用_Vue_两种方法 设置 router-link 样式.
上海 彭彭
08-17 1万+
当我们点击 展示相应组建， 标签会加个class 属性，如图， 如果想高亮就需要 重写这个样式 <style> .router-link-active{ background-color: green; font-size: larger; color: aliceblue } </style> 我们也可以自定义一下， 在 rou...
vue中的hash和histroy
bbt953的博客
06-08 693
路由器两种工作模式： hash histroy区别：写法上 hash /#/ histroy /兼容性 hash 兼容性好，一些旧的浏览器点路由跳转也行 histroy 兼容性略差项目上线上的区别 hash不走请求，通过路由跳转的页面刷新时不会走请求，不会出现后台没有浏览器地址报404的情况 histroy刷新会走请求，可能会报404项目上线一般用的histroy模式，为了防止刷新后404，此时就需要后端用ngins或者java的中间件库配置一下。 我只知道node的配置方法，npm有一个中
Nginx多套环境配置及常见路由策略
wd520521的博客
06-24 3767
一、配置nginx 1、进入 nginx\conf 目录下，用文本编辑器打开 nginx.conf，对配置文件进行如下修改： （1）在 http 中增加 upstream，并配置两台环境的地址； #有几套环境，就配置几条 upstream pcservice{ server 10.101.137.244:8224 ; #节点1 server 10.101.137.245:8081; #节点2 } http..
国庆摆烂第四天，我总结了vue路由hash模式和history的区别
Salange1的博客
10-04 562
vue中常用的模式有两种，hash模式和history模式，最显著的区别就是看浏览器地址中有没有#,带有#的是hash模式，没有的是history模式。还有一种是abstract模式，主要用于不支持浏览器api的环境中，基本没有遇见过。
构建Vue PC端UI组件库：计数器组件实现
"本文将介绍如何从零开始创建一个PC端Vue UI组件库，特别是计数器组件的实现过程，包括需求分析、基本结构和实现细节，适合想要学习Vue组件开发的开发者参考。" 在开发PC端Vue的UI组件库时，计数器组件虽然不常被...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

共创splendid--与您携手

鼓励会让我为您创造出更优质作品

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值