vue路径中去除#
vue使用vue-router时,路径中会有#的字段,是应为打包完成之后,项目为单页面项目,所有的url都指向单个页面,#号之后的路径是指该页面的锚定位置,所以router中的路径是无法加载的。若想去除#,就需要使用router的history模式, 且在服务器端进行配置import Vue from 'vue'import Router from '...
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)
})
更多推荐
所有评论(0)