• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2023-01-14 10:43:20原创50

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

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

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

    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模式:

    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前端开发编程基础视频

    以上就是vue路由有哪几种模式有什么区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue
    上一篇:vue的内置指令有哪些构成 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • vue组件怎么传值• 深入聊聊vue3中的reactive()• 详解Vue3响应式的两大利器:ref与reactive• Vue作者尤雨溪发文展望2023,回顾2022!• vue中用到es6特性有哪些• Vue3学习之深度剖析CSS Modules和Scope
    1/1

    PHP中文网