vue去除url中的#

前言

在学习vue相关知识后,发现构建url在设立路由时，会自带一个#，我想把url设置成普通网页一样没有url

效果即如图所示：

产生原因

vue-router默认使用hash模式，所以在路由加载的时候，项目中的url会自带#

解决方法

使用vue-router的另一种模式history

//index.js
import Vue from 'vue'
import Router from 'vue-router'

import Login from '../views/Login'

//安装路由
Vue.use(Router)

//配置路由
export default new Router({
    mode:'history',
    routes:[
        {
            //路由路径
            path:'/Login',
            //路由名称
            name:'Login',
            //跳转到组件
            component:Login
        }
    ]
})

处理结果

注：当启用history模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现404的情况，这时候就需要服务器增加一个覆盖所有情况的候选资源，如果url匹配不到任何静态资源，则应该返回同一个index.html页面