如何去掉vue路由中的#号?

如何去掉vue路由中的#号?

vue开发时地址栏上的ip后面会跟着一个#号,如果想去掉这个井号,可以在路由上加上 mode: 'history',  即可去掉

直接上代码如下所示:

//设置路由
const router = new VueRouter({
    mode: "history",
    base: __dirname,
    routes: [
        { path: "/",component: Customers },
        { path: "/about",component: About },
        { path:"/add",component:Add },
        { path:"/customers/:id",component:CustomerDetails },
        { path:"/edit/:id",component:Edit }
    ]
})

注:
文章来源地址https://www.toymoban.com/diary/vue/367.html

如果要用history,需要后台配合

到此这篇关于如何去掉vue路由中的#号?的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://www.toymoban.com/diary/vue/367.html

如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用
上一篇 2023年10月08日 13:45
下一篇 2023年10月08日 20:48

相关文章

  • Vue项目路由路径中去掉#

    在Vue中,有两种常见的路由模式:哈希模式(Hash Mode)和历史模式(History Mode)。 哈希模式(Hash Mode): 使用URL中的 # 号来模拟路由。例如: http://example.com/#/about 哈希符号后面的内容被称为哈希路径,在路由器中用于对应不同的组件或页面。 哈希模式的优点是兼容性好,可

    2024年02月02日
    浏览(52)
  • 前端vue2、vue3去掉url路由“ # ”号——nginx配置

    大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。 html的 hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如: 在这个示例中, #about 部分是一个锚点,用于在页面上显示关

    2024年02月11日
    浏览(71)
  • 若依:如何去掉首页,设置登录后跳转到第一个路由菜单

    若依系统是一个很好用的,开源的前端后台管理系统。 最近公司有一个需求,需要把默认的首页隐藏,登录后直接跳转到路由菜单返回的第一个页面。 查找了不少资料,但是都没有实际的解决方案。  不过最好自己还是实现了这个功能。 步骤如下: 1、首先应当找到项目里

    2023年04月09日
    浏览(202)
  • 如何去掉excel中的宏的方法

    篇一:Excel宏病毒清除方法 Excel宏病毒清除方法 用Excel宏病毒专杀工具可以清除,也可以手动清除,我觉得手动的比较好用,安全. 确认不是病毒的情况下,拷贝文件到装有office2010的计算机,试一下以下方法: 方法一、打开后另存,保存类型为:EXCEL工作簿。再次打开这个文

    2024年02月03日
    浏览(43)
  • Python爬虫-爬取文档内容,如何去掉文档中的表格,并保存正文内容

    前言 本文是该专栏的第58篇,后面会持续分享python爬虫干货知识,记得关注。 做过爬虫项目的同学,可能或多或少爬取过文档数据,比如说“政务网站,新闻网站,小说网站”等平台的文档数据。爬取文档数据,笔者这里就不过多详述,而本文, 笔者将主要介绍在爬取文档

    2024年02月08日
    浏览(52)
  • vue前端如何去掉后端接口返回的一个字段中时间里面的时分秒 只需要年月日

    在 Vue 前端中,可以使用 JavaScript 中的 Date 对象来处理日期。对于从后端接口返回的日期字符串,可以先将其转换为 Date 对象,然后再使用 getFullYear()、getMonth()、getDate() 等方法获取年月日等信息 。 以下是一个示例函数,它接受一个日期字符串作为参数,并返回 YYYY-MM-DD 格式

    2024年02月14日
    浏览(49)
  • Vue中的路由导航

    声明式路由导航 router官网-起步 声明式路由导航其实就是使用官方给的router-link路由导航标签直接进行路由跳转 编程式路由导航 router官网-编程式路由导航 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现

    2023年04月23日
    浏览(45)
  • Vue框架中的路由

    npm init vue@latest = 选择添pinia和router = 进入项目文件夹 = npm i = npm run dev router/index.js中的routes下写路由,例如:其中views文件夹中放路由对应页面的文件 3.1 声明式导航跳转标签 使用:router-link to=\\\"/car\\\"购物车/router-link 与a标签区别:a标签会重新请求网络(浏览器功能);router-l

    2024年02月09日
    浏览(34)
  • vue中的动态路由怎么配置

    如何定义动态路由? 如何获取传过来的动态参数? 一.param方式 配置路由格式: /router/:id 传递的方式:在path后面跟上对应的值 传递后形成的路径:/router/123 1.定义路由 2.路由跳转 3.参数获取 通过$route.params.userid获取传递的值 二.query方式 也就是普通配置配置路由格式:/router传递的方

    2024年02月16日
    浏览(49)
  • Vue中的脚手架和路由

    许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 前端系列文章——传送门 后端系列文章——传送门 概念 脚手架是为了更加快速的架构整个项目的结构和基础业务,开发

    2024年02月04日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包