vue3切换路由模式——Hash 、histoary

这篇具有很好参考价值的文章主要介绍了vue3切换路由模式——Hash 、histoary。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、history模式
使用createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
export default router


2、hash模式
使用createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})
export default router


综上所述:
history 对应 createWebHistory
hash 对应 createWebHashHistory文章来源地址https://www.toymoban.com/news/detail-781124.html

到了这里,关于vue3切换路由模式——Hash 、histoary的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue路由的两种模式 hash与history

    Vue 路由是 Vue.js 框架提供的一种机制,用于实现单页面应用(Single-Page Application,简称 SPA)中的前端路由功能。它允许通过定义不同的路由路径和对应的组件,来管理应用程序中不同页面或视图的展示和切换。 Vue 路由使用了浏览器的 History API 或 hash(#)来实现路由导航。通

    2024年02月10日
    浏览(49)
  • 路由hash模式改成history模式的前端vue配置与后端配置

    示例项目地址:http://172.00.00.000:8888/Web/static/index.html/index ,其中: /Web/static/ 表示项目部署路径,每个人的路径不一样,vue默认路径是根路径/,如果你项目不是部署在根路径,那就需要修改一些配置 index.html 表示项目入口文件 /index 表示项目首页的路由地址 vue前端配置 1.配置路

    2024年02月15日
    浏览(48)
  • Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时,Nginx的配置方式

    一、History 模式、Hash 模式   Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用的前端路由。它允许你通过定义路由配置来映射不同的 URL 到对应的组件,实现页面间的跳转和导航。Vue Router 支持两种路由模式:history 模式和 hash 模式。 1、History 模式   在 History 模式

    2024年02月07日
    浏览(34)
  • vite+vue3路由切换滚动条位置重置el-scrollbar

    当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样, vue-router 可以自定义路由切换时页面如何滚动 使用原生滚动条 VueRouter官方文档:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html 为 Router 实例提供一个 scrollBehavior 方法,接收 to

    2024年02月07日
    浏览(46)
  • vue3 element-plus 暗黑模式(主题切换)简易版

    暗黑模式是指在应用程序或操作系统中使用暗色背景和浅色文本的界面设计。与传统的亮色模式相比,暗黑模式具有以下特点: 减少眼部疲劳:使用暗色背景可以减少屏幕发出的蓝光,减轻长时间使用电子设备对眼睛的疲劳程度。这对于在晚上或低光环境下使用设备的人来说

    2024年02月08日
    浏览(60)
  • 基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换

    访问https://nodejs.org/en,点击下载最新版本的nodejs,并安装。 在项目目录文件下,通过cmd运行下述指令。 依次输入下列命令,启动vue项目 在浏览器中加载http://localhost:5173/,页面加载成功,说明vue项目安装启动成功。 建议安装第三方库通过vscode中的终端来操作,项目启动通过

    2024年02月03日
    浏览(80)
  • vue3 + TS + elementplus + pinia实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容

    效果图:  home.vue页面代码 left.vue页面代码 tab.vue页面代码 pinia里面的代码 安装 使用插件  在main.ts中注册 路由代码 我把代码放git上了,有需要的自行拉取 https://gitee.com/Flechazo7/vue3.git

    2024年02月09日
    浏览(48)
  • 前端路由hash模式以及history模式详解

    在前后端分离的项目中,前端一般使用 SPA 单页面应用模式来开发项目。那么,什么是 SPA 呢? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 我的理解: 单页面应用就是

    2024年02月10日
    浏览(37)
  • vue3.2项目中使用history路由模式刷新后页面404

    开发过程中,路由可以正常访问,打包后也可以正常访问,但是一刷新页面就会出现404错误 方法一:修改为Hash路由模式 在router/index.ts文件中,将history路由模式修改为hash路由模式即可。 history路由模式: hash路由模式: 方法二、修改后台伪静态 Nginx: Apache: 可以参考下这篇文

    2024年02月11日
    浏览(50)
  • Vue3在点击菜单切换路由时,将ElementPlus UI库中el-main组件的内容滚动恢复到顶部

    功能:Vue3在点击菜单切换路由时,将页面el-main的内容滚动到顶部,布局如下,使用UI组件库为ElementPlus  在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动,但是我使用无效,于是使用操作dom的方法,如下 可以使用 watch 函数来  监听

    2024年01月18日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包