前端hash和history路由以及预渲染

Mr.wang

vue

发布于：2022年3月1日

次浏览

前端hash和history路由以及预渲染使用插件prerender-spa-plugin

hash模式

原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
优点:

1. 只需要前端配置路由表, 不需要后端的参与
2. 兼容性好, 浏览器都能支持
3. hash值改变不会向后端发送请求, 完全属于前 端路由

缺点:

1. hash值前面需要加#, 不符合url规范,也不美观

   history模式

原理:history模式基于window.history对象的方法
优点:

1. 符合url地址规范, 不需要#, 使用起来比较美观

缺点:

1. 用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
2. 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

总结

1. hash模式较丑，history模式较优雅
2. pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
3. pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
4. pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
5. pushState可额外设置title属性供后续使用
6. hash兼容IE8以上，history兼容IE10以上
7. history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误

预渲染

项目安装 prerender-spa-plugin
npm i prerender-spa-plugin

基于puppeteer进行预渲染网站然后生成html

路由模式必须为history模式（想要预渲染就会失去spa单页）

在vue.config.js更改配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 预加载
      return {
        plugins: [
          new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            routes: ['/', '/register','/login'],
            renderer: new Renderer({
              renderAfterTime: 5000,
              inject: {
                prerendered: false,
              },
              headless: true,
              renderAfterDocumentEvent: 'render-event',
            }),
          }),
        ],
      }
    } 
  },

在main.js配置

1
2
3
4
5
6
7
8

new Vue({
  i18n,
  routes,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  },
}).$mount('#app')

报错

1
2
3
4

Unable to prerender all routes!
1. 页面过多不能打包完毕 最好在10+内的页面
2. headless: true,设置为true
3. hash模式可运行但是打包不成功

本页文档最后更新于：2022年3月1日

javascript

vue，route