前端路由

vue-router 常见问题

1. history 和 hash 模式的区别是什么？(涉及 vue-router 路由模式和前端发布原理)
2. Vue dev 模式下为什么不需要配置 history fallback（涉及webpack-dev-serve配置）
3. 没有定义<router-link>和<router-view>为什么代码里面能直接使用？(涉及vue-router初始化流程和vue插件)
4. 浏览器如何实现URL变化但页面不刷新？（涉及H5 history）

vue-router 路由模式

问：1. history 和 hash 模式的区别是什么？

答：

1. 语法结构不同
2. 部署方式不同
3. SEO 不同

history 模式会发送请求去加载资源，而 hash 模式则不会向服务器发送请求，所以服务端不需要做任何特殊处理。这也导致前端部署方式发生不同。

在线上实际部署用的都是 history 模式，但是需要配置静态资源服务器。

你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面，由前端代码接管路由。

createWebHistory

记得要传入文件夹名称/h5：

const routerHistory = createWebHistory('/h5')

vue.config配置文件中也要加入文件夹名称：

{
  publicPath: '/h5',
}

2. Vue dev 模式下为什么不需要配置 history fallback

因为 vue-cli 中有WebpackDevServer配置，会将路径转到index.html

function genHistoryApiFallbackRewrites(baseUrl, pages = {}) {
  // ...
  return [{ from: /./, to: path.posix.join(baseUrl, 'index.html') }]
}

vue-router初始化流程

3. 没有定义<router-link>和<router-view>为什么代码里面能直接使用？

因为main.js中调用了app.use(router)，router会执行install方法，里面执行app.component('RouterLink')

H5 history

往历史记录堆栈顶部添加一条记录，仅修改了地址栏显示，不会触发页面刷新：

history.pushState()
history.replaceState()

响应pushState或replaceState的调用：

window.onpopstate = (e) => {}

hash模式--方法location.hash和hashchange()