vue-router history模式 - 简书

1、我对history模式的理解

  • 优点

    • url美观、url美观、url美观、url美观（去掉了hash模式下的 # 号）

  • 缺点

    • 出现图片加载不出来问题
    • 打包后F5 刷新问题

毕竟一美遮三丑，个人还是喜欢美观

2、关于router中path

// _import为封装的一个路由懒加载函数
// 使用'a'或'/a'都可以
const routes = [
  {
    path: '/',
    name: 'index',
    component: _import('index'),
    children: [
      {
        // 直接使用a，不用添加‘/’符号
        path: 'a',
        name: 'a',
        component: _import('a/a'),
        children: [
          {
            path: 'aa',
            name: 'aa',
            component: _import('a/aa/aa'),
          },
          {
            path: 'ab',
            name: 'ab',
            component: _import('a/ab/ab'),
          },
        ]
      },
      {
        // 使用‘/b’
        path: '/b',
        name: 'b',
        component: _import('b/b'),
        children: [
          {
            path: 'ba',
            name: 'ba',
            component: _import('b/ba/ba'),
          },
          {
            path: 'bb',
            name: 'bb',
            component: _import('b/bb/bb'),
          },
        ]
      }
    ]
  }
]

3、跳转时的方式

方案1： 使用命名路由来进行跳转

<router-link :to="{name: 'aa'}">aa</router-link>

方案2： 使用完整路径进行跳转

// 若写成 'b/ba'时，会出现问题，具体的问题可以自己尝试
<router-link to="/b/ba">ba</router-link>

4、statia 下的图片无法加载问题

引入图片是一定要在static前面添加 '/'

<img src="/static/img/1.jpg" alt="图片未加载" style="width:100px;">

5、打包后，F5刷新404问题

方便测试打包后的项目，本人在本地使用express搭建的一个简单本地服务器
安装connect-history-api-fallback插件

npm install connect-history-api-fallback --save

在app.js中使用该插件

// express框架
var express = require('express');
var history =  require('connect-history-api-fallback')

var app = express();

app.use('/',history());

Original url: Access
Created at: 2019-11-22 16:19:00
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论