- vue-router和锚点冲突问题
TaoLandd
传统的锚点定位会与vue-router中的路由设置存在冲突,都是使用'#'进行的,所以这里使用一直方法来模拟锚点跳转,并使用tween.js达到动态的过度效果不使用原生锚点,使用这种方式解决import'../static/js/animation.js'import'../static/js/tween.js'xxxxmethods:{anchor:function(e){letid='anch
- vue:监听路由的变化
沐子a~
vue.jsjavascript前端
1.vue3import{useRouter}from'vue-router'constrouter=useRouter()//监听当前路由watch(()=>router.currentRoute.value,(newValue:any)=>{console.log('newValue',newValue)},{immediate:true})2.vue2watch:{$route:{handl
- react快速开始项目模板
飞鸟malred
前端react.js前端前端框架
代码仓库gitee创建项目首先保证安装了node,然后使用vite创建项目vitenpmcreatevitereact-learncdreact-learnnpmi目录结构一个完整的前端项目需要:状态管理在全局维护共有的状态(数据),让页面组件之间共享数据,我们使用pinia路由路由让页面之间可以进行跳转,我们使用vue-router样式样式让页面更美观,我们使用tailwindcss网络请求前端
- vue3.0(十六)路由vue-router
程楠楠&M
vue3.0vue.js前端javascripthtml5vue-router
文章目录路由vue-router路由1.vue-router功能2.vue-router组成3.vue-router常用的函数vue-router使用1.安装2.vue3.0配置3.vue2.0配置4.基本用法5.编程式导航6.路由懒加载导航守卫路由的两种工作模式路由路由(routing)路由是指从源页面到目的页面时,决定端到端路径的决策过程。前端路由前端路由即由前端来维护一个路由规则。实现模式有
- html5路由如何在nginx上部署(vite+vue3)
大眼小夫
html5nginx前端
我们知道前端常用的有Hash模式和html5模式的路由,hash模式在nginx上部署不需要额外的操作,而html5模式则需要额外设置,这里介绍下如何在nginx根地址(location/{})下部署和在非根地址上(location/admin{})部署。在这之前,我先说一下为什么html5路由需要在nginx上配置,我们知道,vue-router就是用来处理路由的,我我们在浏览器上输入地址时,这
- Vue3基础(5)——前端路由、vue-router
番大茄子
Vuevue.jsjavascript
黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币,点赞,收藏呦,历经5年的反复打磨与锤炼,黑马程序员重磅推出全套最新的Vue2+Vue3基础课程。共计500多集的免费视频,助您轻松掌握前端圈最火的Vue框架!https://www.bilibili.com/video/BV1zq4y1p7ga?p=399&
- 【Element Plus】Menu组件:url访问页面时高亮对应菜单栏
karshey
前端小问题vue.jsjavascript前端
文章目录场景代码解决场景使用ElementPlus的Menu菜单|ElementPlus时,点击对应菜单会显示对应路由,此时会高亮选中菜单栏。但输入url访问对应路径,菜单栏不会默认高亮。需求:url访问页面时高亮对应菜单栏。代码router:import{createRouter,createWebHistory}from'vue-router'exportconstroutes=[{path:
- [vue vue-router]vue3路由获取请求参数
在使用vue路由的时候,比如有一个tab栏,点击tab栏不同的tab切换。在配置二级路由时,不把id写死,作为路由参数站位routes:[{path:'/',component:Layout,children:[{path:'',component:Home},{//此处我们把id作为一个可变id配置path:'/category/:id',component:Category}]},{path:
- 模块自动导入的小工具
qq_46435701
vue.jsjavascript前端
import{ref,reactive,onMounted}from'vue'import{useRoute,useRouter}from'vue-router'项目里很多文件都需要引入这些公共库,比较繁琐,使用一个小工具可以自动导入,就不需要在每个文件里面都写这些导入的代码了。通过命令行下载安装npminstallunplugin-auto-import然后去配置文件去修改配置,由于我目前的项目
- vue3 setup里获取query params路由携带的参数
不知名前端v2
vue前端vue3javascriptvue.js前端
import{useRouter}from'vue-router'setup(){constrouter=useRouter()console.log(router.currentRoute.value.query)console.log(router.currentRoute.value.params)通过router.currentRoute.value里的参数获取//路由跳转router.p
- vue2/3 - 报错Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a funct
十一猫咪爱养鱼
前端常见问题解决前端组件与功能(开箱即用)vue常见问题解决vue2vue3浏览器控制台报错详细解决vue报错UncaughtTvue__WEBPACK_IMvue-router路由改变路由版本和vue版本还不行
错误描述在vue2|vue3开发,报错:UncaughtTypeError:(0,vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent)isnotafunction,大概率vue-router路由问题(当然也可能是别的原因),浏览器控制台报错报红,页面也可能白屏打不开,意思是“未捕获的类型错误”,vue开发很奇怪的错误,就算换了各种包的版本还是不行,本文
- vue项目,页面刷新就404了
在Vue.js项目中,如果使用了vue-router并且路由模式设置为history模式,那么在刷新页面或直接访问某个路由时,可能会遇到404错误。这是因为history模式下,前端路由的路径并不匹配服务器上的实际路径,导致服务器无法找到对应的资源。解决方案要解决这个问题,需要在服务器配置中将所有请求重定向到index.html,让前端的Vue.js应用接管路由逻辑。1.Nginx配置如果你使用N
- vue3 + ts + vite + element-plus根据url路径保持对应栏目高亮
yskbchewidhw
vue3前端javascripttypescript
上代码:000111222333YzpAction1Action2退出import{ref}from"vue"import{useRouter}from"vue-router"importlogosfrom"@/assets/img/logo.svg"constrouter=useRouter()//img资源constlogo=ref(logos)leturlname=router.curren
- vue3结合element-plus封装ems菜单栏组件
进阶的巨人001
vue.jstypescriptelement-plus后台管理系统
效果如下:ok,开始代码nav-menu.vueVue3+TS{{item.name}}{{subitem.name}}{{item.name}}import{defineComponent,computed,ref}from'vue'import{useStore}from'@/store'import{useRouter,useRoute}from'vue-router'import{path
- Vue 自动导入函数和变量插件 unplugin-auto-import
HarryHY
#vue3.0vue.js前端javascript
安装npmiunplugin-auto-import-Dvite.config文件//引入importViteAutoImprotfrom'unplugin-auto-import/vite';//自动导入常用函数和变量//配置plugins:[ViteAutoImprot({imports:['vue','vue-router'],//自动导入常用函数和变量}),]使用//import{ref.
- 使用Vite构建Vue3项目,对路由Vue Router 4.x的设置
夏日米米茶
web前端Vue3vue-routervue3vite
Vue3官网:https://v3.cn.vuejs.org/Vite官网:https://cn.vitejs.dev/VueRouter官网:https://next.router.vuejs.org/zh/使用Vite构建时,会和以前的有些写法有些不同,例如之前我们使用//导入路由对象importVueRouterfrom'vue-router'//路径配置.vue可以省略constroute
- iframe三方页面嵌入
啊~哈
vue.jsjavascript前端
一、html代码二、拼接urlimport{ref}from"vue";import{getToken}from"@/utils/auth";importdomainfrom"@/utils/http/domain";import{useRoute}from"vue-router";importCryptoJSfrom"crypto-js";constSECRET_KEY="H6uZdDcB8Jb
- Vue2中路由的使用
22x艾克斯
vue.js
vue-router是vue的一个插件库,专门用于SPA(单页面应用)一个路由就是一组映射关系key-value,key是路径,value是组件创建路由表,多级路由需要配置child时不需要写父路径mode:设置路由模式hash:哈希模式,默认模式,当URL改变的时候,页面不会重新加载,在URL中会有#不太美观,当用户刷新页面的时候,如果没有正确的路由匹配,可能会显示404history:可以使用
- vue路由的使用与鉴权
香蕉可乐荷包蛋
vuevue.jsjavascript前端
在Vue项目中,使用vue-router实现路由管理是构建单页应用(SPA)的核心部分。结合鉴权机制可以实现登录验证、权限控制等常见业务需求。文章目录一、VueRouter基本使用1.安装2.配置路由3.挂载到Vue应用4.使用``和``二、路由鉴权实现(登录验证+权限控制)1.路由元信息(meta)2.全局前置守卫(导航守卫)3.动态添加路由(按角色权限加载不同页面)4.组件内守卫(可选)三、完
- 前端(vue)学习笔记(CLASS 6):路由进阶
肥肠可耐的西西公主
vue.js前端学习
1、路由的封装抽离将之前写在main.js文件中的路由配置与规则抽离出来,放置在router/index.js文件中,再将其导入回main.js文件中,即可实现路由的封装抽离例如//index.jsimport{createMemoryHistory,createRouter}from'vue-router'importHisPagefrom'../views/HisPage.vue'import
- 异常解决---Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"}的解决方法
一块小砖头儿
vuevue
最近在使用vue做项目的时候,点击左侧同一个页面(相同路由)会导致报错Uncaught(inpromise)NavigationDuplicated{_name:"NavigationDuplicated",name:"NavigationDuplicated"}解决办法importRouterfrom'vue-router';Vue.use(Router)//添加这下面一段代码,就可以解决报错c
- vue项目部署后部分子页面刷新后403
毛三仙
博客前端
经过我的仔细分析;终于找到了是刷新后路径后面自动拼接了/;如66.66.66.66/aPage刷新后变成了66.66.66.66/aPage/导致403方法一:修改路由为hash模式//router/index.jsimport{createRouter,createWebHistory,createWebHashHistory}from'vue-router'constrouter=create
- uniapp 发布 H5监听路由变化
某公司摸鱼前端
uni-app前端服务器
由于uni.onAppRoute的兼容性问题h5环境下监听路由出了问题解决方案://App.vuewatch:{'$route.meta.pagePath':{handler:function(newVal){//处理}}}没错,也就是Vue-router的route
- vue3-admin商品管理后台项目(登录页开发和功能实现)
mzldustu
vue-admin项目javascriptvue.js前端
今天来实现vue3-admin商品管理后台项目的登录页功能首先在pages文件夹下面添加一个login.vue文件,里面先写入简单的template登录然后在router文件夹下面的Index.js里面编辑,仍然是引入页面配置路由,about页暂时没啥用,只是测试用的,所以就把它删了。import{createRouter,createWebHashHistory}from'vue-router'
- vue-router的详细安装及配置
愚公爱上精卫
vuevue.js前端javascript
目录1、安装路由,2、引入并配置路由3、路由的视图展示4、路由跳转方式以及传递参数5、路由组件独有的两个钩子函数(也称之为生命周期),用于捕获路由组件的激活状态。6、路由的导航守卫1、安装路由,vue给我们提供了路由功能,该包需要单独安装。npminstallvue-router-S如果你的vue版本是2.0+那就要安装vue-router@3版本一下的,因为vue-router@4的版本只适合v
- 新搭建一个 Vue 项目后,我有了这 15 点思考
前端瓶子君
javahtmlvuecssweb
作者:codexuhttps://juejin.cn/post/69014669944789401681.分解需求技术栈考虑到后续招人和现有人员的技术栈,选择Vue作为框架。公司主要业务是GIS和BIM,通常开发一些中大型的系统,所以vue-router和vuex都是必不可少的。放弃了ElementUI选择了AntDesignVue(最近Element好像复活了,麻蛋)。工具库选择lodash。建
- active-class 是哪个组件的属性?
nanzhuhe
前端
active-class属于vue-router的样式方法,当router-link标签被点击时将会应用这个样式一、首先,active-class是什么,active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;相关可查阅文档:https://router.vuejs.org/zh-cn/api/router-link.html二、在vue-ro
- 前端基础之《Vue(12)—插件封装》
csj50
前端基础前端vue
一、插件封装1、在Vue生态中,除了Vue本身,其它所有的与Vue相关的第三方包,都是插件例子:importVueRouterform'vue-router'Vue.use(VueRouter)//注册插件2、如何封装Vue插件(1)第一种写法constPlugin={install(Vue){//dosomething}}(2)第二种写法constPlugin=function(Vue){}3、
- Ant Design Vue3 + TypeScript + Vite 左侧菜单生成
zngfue
vue+typescripttypescriptvue.js
AntDesignVue3提供了Menu组件用于生成左侧菜单,我们可以使用Menu组件来构建左侧菜单。下面是一个示例:DashboardUserProfileListimport{defineComponent}from'vue';import{useRoute}from'vue-router';exportdefaultdefineComponent({setup(){constroute=us
- 下载和初步上手Vue3路由
lh_1254
vue.js前端
一、安装路由bash#使用npm安装npminstallvue-router@4#或使用yarnyarnaddvue-router@4二、路由配置与暴露1.路由配置文件router/index.jsjavascriptimport{createRouter,createWebHistory}from'vue-router'//定义路由数组,每个对象代表一个路由配置constroutes=[{//路
- 312个免费高速HTTP代理IP(能隐藏自己真实IP地址)
yangshangchuan
高速免费superwordHTTP代理
124.88.67.20:843
190.36.223.93:8080
117.147.221.38:8123
122.228.92.103:3128
183.247.211.159:8123
124.88.67.35:81
112.18.51.167:8123
218.28.96.39:3128
49.94.160.198:3128
183.20
- pull解析和json编码
百合不是茶
androidpull解析json
n.json文件:
[{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]
pull.xml文件
<?xml version="1.0" encoding="utf-8"?>
<stu>
<name>java
- [能源与矿产]石油与地球生态系统
comsci
能源
按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....
那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
- 类与对象浅谈
沐刃青蛟
java基础
类,字面理解,便是同一种事物的总称,比如人类,是对世界上所有人的一个总称。而对象,便是类的具体化,实例化,是一个具体事物,比如张飞这个人,就是人类的一个对象。但要注意的是:张飞这个人是对象,而不是张飞,张飞只是他这个人的名字,是他的属性而已。而一个类中包含了属性和方法这两兄弟,他们分别用来描述对象的行为和性质(感觉应该是
- 新站开始被收录后,我们应该做什么?
IT独行者
PHPseo
新站开始被收录后,我们应该做什么?
百度终于开始收录自己的网站了,作为站长,你是不是觉得那一刻很有成就感呢,同时,你是不是又很茫然,不知道下一步该做什么了?至少我当初就是这样,在这里和大家一份分享一下新站收录后,我们要做哪些工作。
至于如何让百度快速收录自己的网站,可以参考我之前的帖子《新站让百
- oracle 连接碰到的问题
文强chu
oracle
Unable to find a java Virtual Machine--安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案
作者:草根IT网 来源:未知 人气:813标签:
导读:安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径,找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
- Swing中按ctrl键同时移动鼠标拖动组件(类中多借口共享同一数据)
小桔子
java继承swing接口监听
都知道java中类只能单继承,但可以实现多个接口,但我发现实现多个接口之后,多个接口却不能共享同一个数据,应用开发中想实现:当用户按着ctrl键时,可以用鼠标点击拖动组件,比如说文本框。
编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口,重写方法。定义一个全局变量boolea
- linux常用的命令
aichenglong
linux常用命令
1 startx切换到图形化界面
2 man命令:查看帮助信息
man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分
name:对命令的简单说明
synopsis:命令的使用格式说明
description:命令的详细说明信息
options:命令的各项说明
3 date:显示时间
语法:date [OPTION]... [+FORMAT]
- eclipse内存优化
AILIKES
javaeclipsejvmjdk
一 基本说明 在JVM中,总体上分2块内存区,默认空余堆内存小于 40%时,JVM就会增大堆直到-Xmx的最大限制;空余堆内存大于70%时,JVM会减少堆直到-Xms的最小限制。 1)堆内存(Heap memory):堆是运行时数据区域,所有类实例和数组的内存均从此处分配,是Java代码可及的内存,是留给开发人
- 关键字的使用探讨
百合不是茶
关键字
//关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final 类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖,但可以继承 final 变量 只能有一次赋值,赋值后不能改变 final 不能用来修饰构造方法*///this()
- JS中定义对象的几种方式
bijian1013
js
1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象):
<html>
<head>
<title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title>
</head>
<script>
var obj = new Object();
- 表驱动法实例
bijian1013
java表驱动法TDD
获得月的天数是典型的直接访问驱动表方式的实例,下面我们来展示一下:
MonthDaysTest.java
package com.study.test;
import org.junit.Assert;
import org.junit.Test;
import com.study.MonthDays;
public class MonthDaysTest {
@T
- LInux启停重启常用服务器的脚本
bit1129
linux
启动,停止和重启常用服务器的Bash脚本,对于每个服务器,需要根据实际的安装路径做相应的修改
#! /bin/bash
Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo);
Ops=(Start, Stop, Restart);
currentDir=$(pwd);
echo
- 【HBase六】REST操作HBase
bit1129
hbase
HBase提供了REST风格的服务方便查看HBase集群的信息,以及执行增删改查操作
1. 启动和停止HBase REST 服务 1.1 启动REST服务
前台启动(默认端口号8080)
[hadoop@hadoop bin]$ ./hbase rest start
后台启动
hbase-daemon.sh start rest
启动时指定
- 大话zabbix 3.0设计假设
ronin47
What’s new in Zabbix 2.0?
去年开始使用Zabbix的时候,是1.8.X的版本,今年Zabbix已经跨入了2.0的时代。看了2.0的release notes,和performance相关的有下面几个:
:: Performance improvements::Trigger related da
- http错误码大全
byalias
http协议javaweb
响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行。
响应码分五种类型,由它们的第一位数字表示:
1)1xx:信息,请求收到,继续处理
2)2xx:成功,行为被成功地接受、理解和采纳
3)3xx:重定向,为了完成请求,必须进一步执行的动作
4)4xx:客户端错误,请求包含语法错误或者请求无法实现
5)5xx:服务器错误,服务器不能实现一种明显无效的请求
- J2EE设计模式-Intercepting Filter
bylijinnan
java设计模式数据结构
Intercepting Filter类似于职责链模式
有两种实现
其中一种是Filter之间没有联系,全部Filter都存放在FilterChain中,由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下:
package com.ljn.filter.custom;
import java.util.ArrayList;
- 修改jboss端口
chicony
jboss
修改jboss端口
%JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml
中找到
<!-- The ports-default bindings are obtained by taking the base bindin
- c++ 用类模版实现数组类
CrazyMizzz
C++
最近c++学到数组类,写了代码将他实现,基本具有vector类的功能
#include<iostream>
#include<string>
#include<cassert>
using namespace std;
template<class T>
class Array
{
public:
//构造函数
- hadoop dfs.datanode.du.reserved 预留空间配置方法
daizj
hadoop预留空间
对于datanode配置预留空间的方法 为:在hdfs-site.xml添加如下配置
<property>
<name>dfs.datanode.du.reserved</name>
<value>10737418240</value>
 
- mysql远程访问的设置
dcj3sjt126com
mysql防火墙
第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况,my.cnf放置于在以下目录: /etc/mysql/my.cnf (Debian linux) /etc/my.cnf (Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf,修改内容从以下行: [mysqld] 你所需要: 1
- ios 使用特定的popToViewController返回到相应的Controller
dcj3sjt126com
controller
1、取navigationCtroller中的Controllers
NSArray * ctrlArray = self.navigationController.viewControllers;
2、取出后,执行,
[self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
- Linux正则表达式和通配符的区别
eksliang
正则表达式通配符和正则表达式的区别通配符
转载请出自出处:http://eksliang.iteye.com/blog/1976579
首先得明白二者是截然不同的
通配符只能用在shell命令中,用来处理字符串的的匹配。
判断一个命令是否为bash shell(linux 默认的shell)的内置命令
type -t commad
返回结果含义
file 表示为外部命令
alias 表示该
- Ubuntu Mysql Install and CONF
gengzg
Install
http://www.navicat.com.cn/download/navicat-for-mysql
Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html
Step2:进入下载目录,解压压缩包:tar -zxvf navicat11_mysql_en.tar.gz
- 批处理,删除文件bat
huqiji
windowsdos
@echo off
::演示:删除指定路径下指定天数之前(以文件名中包含的日期字符串为准)的文件。
::如果演示结果无误,把del前面的echo去掉,即可实现真正删除。
::本例假设文件名中包含的日期字符串(比如:bak-2009-12-25.log)
rem 指定待删除文件的存放路径
set SrcDir=C:/Test/BatHome
rem 指定天数
set DaysAgo=1
- 跨浏览器兼容的HTML5视频音频播放器
天梯梦
html5
HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。 How to enable <video> and <audio> tags in
- Bundle自定义数据传递
hm4123660
androidSerializable自定义数据传递BundleParcelable
我们都知道Bundle可能过put****()方法添加各种基本类型的数据,Intent也可以通过putExtras(Bundle)将数据添加进去,然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity
把数据放到Intent
- C#:异步编程和线程的使用(.NET 4.5 )
powertoolsteam
.net线程C#异步编程
异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程,可使用线程也可以不用。将异步与线程同时讲,将有助于我们更好的理解它们的特征。
本文中涉及关键知识点
1. 异步编程
2. 线程的使用
3. 基于任务的异步模式
4. 并行编程
5. 总结
异步编程
什么是异步操作?异步操作是指某些操作能够独立运行,不依赖主流程或主其他处理流程。通常情况下,C#程序
- spark 查看 job history 日志
Stark_Summer
日志sparkhistoryjob
SPARK_HOME/conf 下:
spark-defaults.conf 增加如下内容
spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true
spark-env.sh 增加如下内容
export SP
- SSH框架搭建
wangxiukai2015eye
springHibernatestruts
MyEclipse搭建SSH框架 Struts Spring Hibernate
1、new一个web project。
2、右键项目,为项目添加Struts支持。
选择Struts2 Core Libraries -<MyEclipes-Library>
点击Finish。src目录下多了struts