「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。
在本篇我会给大家介绍一下关于vue中路由器的两种工作模式同时说一下项目上线的基本流程。
在我们写这么久的代码相信大家对这个#相当熟悉了没少见吧，这个有他专门的名称叫hash值也就是说在#号后面所有的值都是hash值，当存在的时候他就只会访问在http://localhost::8080 之中的东西而在#号后面呢就不是当成地址，所以呢hash值最大的特点就是不会被当成路径穿给服务器了。这个只是我们前端自己玩玩的东西。
当然这就是我们要说的路由的其中一个工作模式了，那另外一个工作模式是什么呢？这就是history工作模式，这个呢就是把#去掉了在页面上比较好看了，但是他的兼容性比较差。
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
//创建并暴露一个路由器
const router = new VueRouter({
mode:'history',
routes:[
{
name:'guanyu',
path:'/about',
component:About,
meta:{isAuth:true,title:'关于'}
},
]
})
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to,from,next)=>{
console.log('前置路由守卫',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
}) */
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
export default router
接下来就是当我们全部完成的时候呢，也就是项目上线了这里就有一个新命令了 npm run build项目打包他呢会生成一个关于叫dist文件夹里面就是我们css，js，html文件了，我们打包项目的时候是通过src文件夹中的速度的快慢是要看你电脑的性能了。
13.路由器的两种工作模式
- 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
- hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
- hash模式：
- 地址中永远带着#号，不美观 。
- 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
- 兼容性较好。
- history模式：
- 地址干净，美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
