Vue History的问题一些注意的点

一.Router 的 mode: 'history'

此种模式下，路由会变为 xxx.com/page/1 等用户自定义的路由，但是存在一个问题，页面如果刷新，http去请求 xxx.com/page/1时，会发现该页面不存在。

由于Vue 是单页模式，所以任何页面的刷新其实都是主页的刷新，为了处理这个问题。

.NET IIS 需要配置 URL 重写，可参考文档：https://blog.csdn.net/suxuelian/article/details/80103514

注意事项：

0：此文针对的是.net 下的网站设置，nginx 设置原理与此类似，路由重写设置方法不同

1.下载和安装URL Rewrite 完成后，如果在IIS 管理界面未找到 URL重写功能，可以重启IIS服务（如果仍然未找到，重启电脑）

2.Vue 打包完成后，会生成index.html 和 static 文件夹，所以这个模式正则中需要排除static文件夹，

避免重定向之后找不到 js css 之类的文件。

3.重定向到/index.html ，Vue会自动去匹配对应的路由，页面代码中可以自己写想要的代码。

4.重定向之后的 404 处理，需要定义一个 router {path:'*',component:‘404.vue'}

示例设置：正则(不是非常准确，能用)：^(?:(?!/?static/).*)

对应的Vue Router 中配置：

import notfound from '@/components/notfound'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Login2',
      component: Login
    },
    {
      path:'*',
      component:notfound//自定义的404页面组件
    }
  ]
})

二.Vue中获取任意一HTML元素的坐标方法

this.$refs.mainContainter.getBoundingClientRect()

三.RouterView 的使用

Vue History的问题 一些注意的点

Vue History的问题一些注意的点