本教程操作环境:windows7系统、vue3版,DELL G3电脑。vue路由实际上存在三种模式:Hash: 使用URL的hash值来作为路由。支持所有浏览器。History: 以来HTML5 History api 和服务
本教程操作环境:windows7系统、vue3版,DELL G3电脑。
vue路由实际上存在三种模式:
Hash: 使用URL的hash值来作为路由。支持所有浏览器。
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模式:
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
以上就是vue路由有哪几种模式有什么区别的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue路由有哪几种模式有什么区别
本文链接: https://www.lsjlt.com/news/206841.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0