带你走进面试.......（未完待续）

this.$router.push("/login");
//使用对象的形式 不带参数
this.$router.push({ path:"/login" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({ path:"/login",query:{username:"jack"} }); 
使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({ name:'user' , params: {id:123} });

2.$ route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。
在页面上添加以下代码，可以显示这些路由对象的属性：二

<div>
 当前路径：{{$route.path}}
 当前参数：{{$route.params | json}}
 路由名称：{{$route.name}}
 路由查询参数：{{$route.query | json}}
 路由匹配项：{{$route.matched | json}}
</div>
二.谈谈router如何实现懒加载:

vue异步组件
es提案的import()
webpack的require,ensure()

1.vue异步组件技术 ==== 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件

/* vue异步组件技术 */
{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
},{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/index'],resolve)
},{
  path: '/about',
  name: 'about',
  component: resolve => require(['@/components/about'],resolve)
}

2.组件懒加载方案二路由懒加载(使用import)

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

3.webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

/* 组件懒加载方案三: webpack提供的require.ensure() */
{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
  path: '/about',
  name: 'about',
  component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}

三.谈谈vue首页白屏怎么处理:

（1）什么是白屏？

现在很多页面使用模版渲染，在网速不好的情况下，会导致出现loading 或者空白页，这种就叫白屏。

（2）白屏出现的原因【根本原因：网速 & 静态资源】

css 文件加载需要时间【解决：css 代码前置或者内联。】
首屏内联js 会影响加载时间【解决：尽量不在首屏中加载JS,或者放置内联脚本】
首屏没有实质的数据，是通过接口异步加载进来的【解决：首屏直接同步渲染 html ，页面滚动时异步加载】

解决:

1.路由懒加载

2.开启gzip压缩

// 以vue-cli脚手架为例  找到config下index.js文件
 
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
 
    /**
     * Source Maps
     */
 
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
 
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    // 设置生产环境gzip为true
    productionGzip: true,   
    productionGzipExtensions: ['js', 'css'],
 
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

3.3.使用webpack的externals属性把不需要打包的库文件分离出去，减少打包后文件的大小

// index.html中引入对应的文件或使用cdn
 
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 
 
// 在webpack基础配置中添加以下代码
 
module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

4.使用vue的服务端渲染(ssr)

ssr优点是seo优化，以及加快首屏加载

5.1.使用CDN减小代码体积加快请求速度

1.在index.html里引入线上cdn

configureWebpack:{
	externals: {
      'echarts': 'echarts',
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'moment': 'moment',
      'element-ui': 'ELEMENT'
    },
}

3.注释main.js里的import

6..图片放在oss上，不放在项目的assets文件夹下

对象存储(oss)提供内置的CDN集成，可以缓存资产以加快页面加载速度。对象存储非常适合存储静态资源，例如，用于存储用户定义的内容：图像和电影，存储备份文件和日志。
更换项目里的图片路径，为线上地址即可

6.压缩代码，移除console.log

npm i uglifyjs-webpack-plugin@1.1.1 --save-dev
配置vue.config.js

const isProduction = process.env.NODE_ENV === 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
chainWebpack(config) {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  }