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 的使用