PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

vue路由有哪几种模式有什么区别

青灯夜游
青灯夜游 原创
2023-01-13 14:44:59 5210浏览

vue路由有三种模式:hash、history、abstract。区别:1、hash模式的url路径会出现#字符,其他模式不会;2、hash值的改变会触发hashchange事件,其他模式不会;3、history模式整个地址重新加载,可以保存历史记录,方便前进后退,其他模式不行。

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

vue路由实际上存在三种模式:

  • Hash:      使用URL的hash值来作为路由。支持所有浏览器。

  • History:   以来HTML5 History API 和服务器配置

  • Abstract:支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。

vue-router中默认使用的是hash模式,也就是会出现如下的URL:,URL中带有#号

我们可以用如下代码修改成history模式:

import Vue from 'vue'
import Router from 'vue-router'
const userInfo = () => import('@/views/userInfo')
Vue.use(Router)

export default new Router({
  mode: 'history',//hash abstract
  routes: [
    {
      path: '/user-info/:userId',
      component: userInfo
    }
  ]
})

区别

hash模式:

  • url路径会出现 # 字符

  • hash值不包括在 HTTP 请求中,它是交由前端路由处理,所以改变hash值时不会刷新页面,也不会向服务器发送请求

  • hash值的改变会触发hashchange事件

history模式:

  • 整个地址重新加载,可以保存历史记录,方便前进后退

  • 使用 HTML5 API(旧浏览器不支持)和 HTTP服务端配置,没有后台配置的话,页面刷新时会出现404

nginx 配置:

location / {
  try_files $uri $uri/ /index.html;
}

路由取参

https://xxx.com//user-info/888 

this.$route.params.userId
https://xxx.com//user-info?userId=888

this.$route.query.userId

(学习视频分享:web前端开发编程基础视频

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。