Vue的学习(十六)Vue项目设置默认的首页,并且将路由里面的# 去除,router-link 这个标签的其他属性

Vue-router学习笔记 文章目录准备创建项目路由的配置使用vue-router的步骤:路由默认值(默认显示首页)小插曲修改为history模式router-link的补充通过代码跳转路由动态路由的使用路由懒加载的使用认识嵌套路由参数传递全局导航守卫keep-alive 准备 创建项目 路由的配置 src/router/index.js // 配置路由信息 import VueRouter from 'vue-router' import Vue from 'vue' // 使用插件 Vue.use(VueRouter) / 阅读详情

在这里插入图片描述

设置默认的首页

我们浏览器一输入访问的地址,应该默认的到首页,而不是我们点击之后到,所以,我们需要再配置一个路径,让地址重定向到首页

在这里插入图片描述

将路由里面的# 去除

在这里插入图片描述
以上的路由上面有# ,我们想要去除

在这里插入图片描述
在创建路由对象的时候,多加一个参数,那么就可以去除

在这里插入图片描述
在这里插入图片描述

router-link 这个标签的其他属性

1 tag属性

之前我们已经学过to属性,其实还有很多的其他的属性。
我们知道。router-link 这个标签渲染到页面就是a标签,但是现在我们不想他渲染为a标签,怎么办,想要自定义。就要用其他的标签

代码这样写的时候
在这里插入图片描述
浏览器页面是这样的
在这里插入图片描述
当代码变为这样

在这里插入图片描述
页面就会变为

在这里插入图片描述

2 replace属性

页面来回跳转,浏览器上面的这个也是可以的

在这里插入图片描述
但是我们不想要浏览器上的这个,现在想要只有点击按钮,才可以来回切换,我们就需要这个属性
在这里插入图片描述

在这里插入图片描述

3 修改点击之后的样式

在这里插入图片描述
原本是这样的,现在想要自己修改样式,那么就将他源码的这个class拿上,自己添加一些样式

在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

vue2(6)之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint router-link的两个高亮类名 太长了,我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面?查询参数传参(多个参数)动态路由传参(一个参数,优雅简洁)keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue 阅读详情

相关推荐

【信息科学与工程学】计算机科学与自动化——第六十三篇 人机交互之前端交互参数知识库01

此方案可满足千万级并发需求,同时支持时序数据、知识图谱和文档数据库的高效处理,通过云原生架构实现极致弹性。​:每月约$15-20万(100节点K8s集群+数据库集群+CDN流量)1. 宠物上架/下架流程。

weixin_49199313的博客 1479

【前端学习日记】Vue设定网站的默认显示页面

两个方法: ① 配置路由时,设定根目录路由路径:‘/’ ,并根据匹配规则为其指定一个路由显示组件 --该方式就是常规的路由配置,就是将路径设为根目录,这样在访问网站首页的时候,就可以默认显示这个匹配的组件。 RouterView将是你自己想显示的组件 App.vue中 ② 通过路由重定向 --- redirect 第一步同样是设定根目录路径为:“/”,但为其增加一个全新的配置项 --redirect,这样的话,当访问根目录路径时,就会重定向一个新的路径匹配的组件。 而且根目录的跳转是

qq_54207312的博客 1万+

若依后台管理系统源代码

Ruoyi 是基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用

如何在vue项目中设置首页

如何在vue项目中设置首页 1、首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组件放在src文件夹下的components文件夹里面。 2、找到router文件夹,在router文件夹下的index.js文件中设置主页面路由 注意:页面路径一定不能错,否则浏览器无法渲染,要设置的主页面路径等内容在routes下设置为第一位。 ...

bingyue0126的博客 2万+

vue设置默认首页的操作

在router.js设置如下: index就是默认页面 const routes = [ // 公司项目 { path: '/', redirect: '/index' }, {path:'/index',component:index}, { path:'/example', component:example, redirect:'/edetail', children:[ {path:'/edetail',component:edetail} ] }, {path:'/login',component:login} ] 不使用在根目录设置router的方法,跳转页面带不同的头部信息时容

人形机器人专题:人形机器人关节,从Optimus选型看关节的发展

今天分享的是深度研究报告:《(报告出品方:中泰页。

GPT20236688的博客 3226

Vue创建首页

一、创建后台页面 1.在前台components里创建loyout.vue组件,作为后台管理页面

qq_52335038的博客 1万+

从指令到坐标:深度解析307系列基站定位的AT指令实战与排错

本文深度解析了ML307系列模组基站定位的AT指令实战应用与排错方法。重点剖析了AT+MLBSCFG和AT+MLBSLOC两条核心指令的配置、执行流程及异步响应机制,并针对高德与OneOs两种主流定位服务提供了完整的配置指南。文章结合常见错误码(如126、127)和硬件注意事项,分享了确保定位成功的实战经验与稳健的程序框架。

weixin_29057695的博客 490

Vue Router的简单理解和使用

用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。单页面应用(Single Page Application,SPA),是一种现代化的Web应用开发方式,通过动态加载内容提供了更好的用户体验和性能。Vue Router就是Vue.js官方的路由插件,什么是单页面应用呢?

aybaiwan的博客 453

Anki小白必看:手把手教你打造高颜值个性化笔记模板(附Leaflyer模板下载)

本文为Anki新手提供详细的个性化笔记模板设计指南,从基础配置到高级定制技巧,帮助用户打造高效记忆系统。特别推荐Leaflyer模板下载,通过视觉优化和功能强化,显著提升学习体验和记忆效率。

weixin_28717969的博客 433

人形机器人大语言模型 pi*0.6(π*0.6):最新从经验中学习的VLA

摘要:本文介绍了一种名为Recap的机器人学习方法,通过示范训练、纠错指导和强化学习三个步骤提升机器人执行复杂任务的能力。研究显示,仅依靠模仿学习的机器人难以解决错误累积问题,而Recap方法通过价值函数可视化和优势条件策略训练,使π*0.6模型在咖啡制作、纸箱组装和衣物折叠等任务中的成功率提升超过90%,吞吐量翻倍。该方法突破了传统依赖人工演示的局限,通过自主经验学习实现机器人性能的持续优化,为未来机器人基础模型的发展提供了新方向。

2506_90492529的博客 1321

Vue Router 的使用详解(Vue3)

Vue Router 是 Vue 开发中最重要的技术之一。几乎所有 Vue 项目都会使用它。页面切换URL 管理权限控制单页面应用后台系统H5小程序电商网站Vue Router 都是必须掌握的核心技术。

m0_67217201的博客 202

FPGA开发中的操作系统

在FPGA开发中,操作系统起着关键的作用,它负责任务管理、资源管理、中断处理和设备驱动程序等功能。在实际的FPGA开发中,可以选择使用现有的操作系统,如MicroC/OS-II、FreeRTOS等,或者根据具体需求自行设计和开发操作系统。在FPGA(可编程逻辑门阵列)开发中,操作系统扮演着关键的角色,为硬件设计师提供了一种有效的方式来管理资源、调度任务并实现系统级功能。本文将介绍FPGA开发中的操作系统概念,并提供一个简单的示例代码来说明如何在FPGA平台上实现一个基本的操作系统。

CqpFsharp的博客 1163

学习Vue的常见问题

一、消除router-link的下划线 要消除下划线,增加一下样式代码即可: * { text-decoration: none; } .router-link-active { text-decoration: none; }

x-dragon8899的博客 3287

一文讲透 SAP SD:把报价、订单、交付、开票串成一条可落地的业务闭环

摘要:SAP SD(销售与分销)模块是企业O2C(订单到收款)流程的核心,管理从客户意向到回款的完整链路。该模块围绕销售订单、交付、开票等关键环节,与财务、物料管理等模块深度集成。SD的核心在于主数据管理、单据驱动流程、定价规则引擎和信用风控,通过条件技术实现复杂定价策略,并支持多维度分析。典型应用场景包括多渠道销售企业的价格体系管理、信用控制和物流协同,有效解决销售与交付脱节、财务对账困难等业务痛点。(149字)

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 515

SAP ABAP CO核心扩展-为企业定制ZCKM3N物料价格分析增强(CKM3 CKM3N CKM8N)

这篇文章,将为大家讲述物料价格分析扩展增强(ZCKM3N)的方法和原理,并基于CKM3N的视图之一“CV成本组件”,教大家如何一步步实现批量输出多工厂物料的物料价格分析报表。

SAP李斌,本人承诺所有原创文章均不使用任何AI生成技术,请大家放心阅读。 3987

Vue 完整版系统知识文档

《Vue全栈开发实战手册》摘要 本手册系统整合Vue2/Vue3全栈知识体系,涵盖基础语法、组件开发、状态管理、工程化等核心内容,适合从入门到精通的完整学习路径。主要特点: 基础核心 详解MVVM架构和响应式原理(Vue2的Object.defineProperty vs Vue3的Proxy) 完整模板语法规则与16种内置指令解析 组件系统核心:通信机制(8种方案)、插槽、动态组件、递归组件 进阶实战 状态管理:Vuex/Pinia完整解决方案 路由开发:动态路由、权限控制、懒加载 工程化:Webpack

专注 Java 后端开发,分享基础语法、JVM、并发、Spring 全家桶、微服务、分布式、性能优化等实战干货。坚持输出高质量技术笔记,用简单语言讲清复杂原理,助力每一位 Java 开发者稳步进阶。 405

弹窗提示报错: F:\c\CFX5\bin\Debug\net9.0-windows10.0.26100.0\CFX5.dll 面向无法动态枚举工具箱项目的平台...如何解决?

🏆本文收录于 《全栈Bug调优(实战版)》 专栏,该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因,并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者,还是拥有多年项目经验的资深工程师,本专栏都将为你提供一条系统化、高质量的问题排查与优化路径,助力你加速成长,攻克技术壁垒,迈向技术价值最大化与职业发展的更高峰🚀!

**My Coding Family** 949

JavaWeb学习

#前端部分(了解)课程思路、前端要素(Web了解、html、JS、vue、ajax、Element等)传统路线现在课程大纲路线## 前端要素(Web了解、html)HTML语法特点基本标签html标签(span)html标签(a)html标签(video)盒子模型:html标签(div)html标签(表格)html标签(表单)## 前端要素(JS)JS引入方式JS基础语法JS函数JS对象(基础(只关注Array、String、JSON)、BOM、DOM)JS事件监听## 前端要素(Vue)插值表达式Vue常

qq_2634545805的博客 431

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

js面试题收集

js面试题整理 链接 H5 新特性 50个css面试题 css优化,js优化以及web性能优化 js面试题知识点全解(一原型和原型链) 如何实现浏览器内多个标签页之间的通信? (阿里) WebSocket、SharedWorker; 也可以调用localstorge、cookies等本地存储方式; localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件, 我们通过监听...

weixin_44218695的博客 377

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

路由跳转的四种方式

query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失 1.router-link 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行,

rfalcon的博客 2682

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

vue中修改默认首页

在src/router/index.js中routes里添加一项 path为’/’ component为想要设置的默认首页。

Bakertt的博客 3515

若依:如何去掉首页,设置登录后跳转到第一个路由菜单

若依系统去掉默认首页index,登录后直接跳转到路由接口菜单返回的第一个路由地址作为首页页面。该功能已经经过作者多次验证、修改和反复测试,基本没有问题的。然后这里还针对访问路由出现404的问题作出了修改。供大家参考,互相学习。

程序媛的博客 4万+

【浅谈vue3基础】如何升级vue版本并配置路由修改默认首页

vue3如何通过router路由修改默认首页;如何vue2升级到vue3

赏樱看雪撸代码 6379

vue项目启动设置默认启动页

vue项目启动设置默认启动页

Yajyaj123的博客 1万+

vue基础教程(7)——构建项目级首页

前面我们学习了vue的路由和登录页搭建,本文将和大家共同学习首页的搭建。首页示例如图:很多项目经验比较少的同学,一般都是对某些语法很熟悉,但是对整个项目是如何从零开始搭建的,页面布局是如何通过代码实现的,可能并未过多关注。也许有人会说,这些ui框架或者开源项目,都会开箱即用,可如果框架提供的布局无法满足要求呢,如果开源项目存在bug呢,如果企业做大做强需要UI重新设计web端呢?我们有太多的理由去了解这些基础知识,我们可以永远不做,但是不能不会!

关注前端,关注原创 3879
上一篇: Vue的学习(十五)Vue项目中使用路由,命令安装路由,并且搭建路由的框架,项目加载的流程
下一篇: Vue的学习(部门管理系统)项目的搭建
一写代码就开心
博客等级 码龄7年 2万+粉丝 1037原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一写代码就开心

你的打赏将是我最大的动力

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

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

打赏作者

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

抵扣说明:

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

余额充值