vue-router有哪几种路由模式、区别是什么？【专栏13】

实际上存在三种模式：

• 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模式：

1. url路径会出现 # 字符
2. hash值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求
3. hash值的改变会触发hashchange事件

history模式：

1. 整个地址重新加载，可以保存历史记录，方便前进后退
2. 使用 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

参考资料

• http://javanx.cn/question/2762.html
• https://cnblogs.com/Rivend/p/12629097.htm