vue的几种路由模式有哪些区别

这篇文章主要介绍了vue的几种路由模式有哪些区别的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue的几种路由模式有哪些区别文章都会有所收获，下面我们一起来看看吧。 vue路由有三种模式：Hash、History、Abstract。区别：1、hash模式的url路径会出现#字符，其他模式不会；2、hash值的改变会触发hashchange事件，其他模式不会；3、history模式整个地址重新加载，可以保存历史记录，方便前进后退，其他模式不行。vue路由实际上存在三种模式：Hash: 使用URL的hash值来作为路由。支持所有浏览器。History: 以来HTML5 History API 和服务器配置Abstract：支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。vue-router中默认使用的是hash模式，也就是会出现如下的URL：，URL中带有#号我们可以用如下代码修改成history模式：

importVuefrom'vue'
importRouterfrom'vue-router'
constuserInfo=()=>import('@/views/userInfo')
Vue.use(Router)

exportdefaultnewRouter({
mode:'history',//hashabstract
routes免费云主机、域名:[
{
path:'/user-info/:userId',
component:userInfo
}
]
})

区别hash模式：url路径会出现 # 字符hash值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求hash值的改变会触发hashchange事件history模式：整个地址重新加载，可以保存历史记录，方便前进后退使用 HTML5 API（旧浏览器不支持）和 HTTP服务端配置，没有后台配置的话，页面刷新时会出现404nginx 配置：

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

关于“vue的几种路由模式有哪些区别”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue的几种路由模式有哪些区别”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

相关推荐: vue的生命周期分为几个阶段

本篇内容介绍了“vue的生命周期分为几个阶段”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ Vue.js是一种前端开发框架，它采用了一些方便开发者工作的技术，其…