vue路径中去除#

vue使用vue-router时，路径中会有#的字段，是应为打包完成之后，项目为单页面项目，所有的url都指向单个页面，#号之后的路径是指该页面的锚定位置，所以router中的路径是无法加载的。

若想去除#，就需要使用router的history模式， 且在服务器端进行配置

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const router = new Router({

  mode: 'history',（使用history模式）

  routes: [

    {

      path: '/',

      name: '****',

      component: ****

    }

  ]

})

export default router

后端配置例子

Apache

<IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.html [L]

</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

nginx

location/{

        try_files $uri $uri/ /index.html;

}

原生 Node.js

const http = require('http')

const fs = require('fs')

const httpPort = 80

http.createServer((req,res)=>{

    fs.readFile('index.htm','utf-8',(err,content)=>{

        if(err){

            console.log('We cannot open "index.htm" file.')

        }

        res.writeHead(200,{

            'Content-Type':'text/html; charset=utf-8'

        })

        res.end(content)

    })

}).listen(httpPort,()=>{

    console.log('Server listening on: http://localhost:%s',httpPort)

})