vue常见问题（1）

列表进入详情页的传参问题
本地开发环境请求服务器接口跨域的问题
UI库的按需加载
如何优雅的只在当前页面中覆盖ui库中组件的样式
打包后生成很大的.map文件的问题
fastClick的300ms延迟解决方案
路由懒加载（也叫延迟加载）
路由拆分管理

1，列表进入详情页的传参问题

1，router-link to = '/'字符串传参

路由传的第一个参数

2，router-link to = {path，query} 通过对象path传参

路由传的第二个参数

3，router-link to = {name，params} 通过对象name传参

路由传的第三个参数

4， $router.push({ path: '/xxxx/${id}' }) 直接传参

路由传的第四个参数

5，$router.push({path，query}) 通过对象query传参

路由传的第五个参数

6，$router.push({name，params}) 通过对象query传参

路由传的第六个参数

2，本地开发环境请求服务器接口跨域的问题

640.png

本地开发项目请求服务器接口的时候，因为客户端的同源策略，导致了跨域的问题；那么我们怎么解决？
在项目根目录下，找到vue.config.js文件(如果没有找到，那就建一个)

此时，配置是没有允许进行跨域的，一旦跨域会报上面错误

module.export = {
    devServer: {
        host: 'localhost',// 配置本地的ip地址
        port: 8080,// 配置本地的端口地址
    }
}

下面配置是允许进行跨域的

module.export = {
    devServer: {
        host: 'localhost',// 配置本地的ip地址
        port: 8080,// 配置本地的端口地址
        proxy: {// 跨域配置，一下的配置就是代理付服务向跨域服务器进行处理的过程
            'api':{ // 我们要请求的接口域名。
                target: 'http://localhost:3000', // 即将要跨域的地址
                changeOrion: true, // 是否开启跨域
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

image.png

注：要注意我们访问接口时，写的是/api，此处的/api指代的就是我们要请求的接口域名。如果不想每次接口都带上/api，可以更改axios的默认配置axios.defaults.baseURL = '/api';
配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。

3，UI库的按需加载

演示vue中ui库怎样进行按需加载，element-ui
1，安装：npm i element-ui -S
2，安装babel-plugin-import插件使其按需加载：npm i babel-plugin-import -D
3，在 .babelrc文件中中添加插件配置

{
  "plugins": [
    ... 以上是项目原来的代码部分
    //... 以下是配置的代码
     ["import", 
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk",
        "style": true
      }
    ]
  ]
}

4，在main.js中按需加载你需要的插件

import {Select,Button} from 'element-ui'
Vue.use(Select);
Vue.use(Button);

5，在页面中使用

按钮

4，如何优雅的只在当前页面中覆盖ui库中组件的样式

image.png

我们正常写的所有样式，都会被加上[data-v-08ec2874]这个属性（如上图所示），但是第三方组件内部的标签并没有编译为附带[data-v-08ec2874]这个属性。所以，我们想修改组件的样式，就没辙了。怎么办呢，有些小伙伴给第三方组件写个class，然后在一个公共的css文件中或者在当前页面再写一个没有socped属性的style标签，然后直接在里面修改第三方组件的样式。这样不失为一个方法，但是存在全局污染和命名冲突的问题。约定特定的命名方式，可以避免命名冲突。但是还是不够优雅。

作为一名优（强）秀（迫）的（症）前（患）端（者），怎么能允许这种情况出现呢？好了，下面说下优雅的解决方式：

通过深度选择器解决。例如修改上图中组件里的el-tab-item类的样式，可以这样做：

.el-tabs /deep/ .el-tab__item{ color: blue;}

这样就不会给el-tab也添加[data-v-08ec2874]属性了。至此你可以愉快的修改第三方组件的样式了。
当然了这里的深度选择器/deep/是因为我用的less语言，如果你没有使用less/sass等，可以用>>>符号。

5，打包后生成很大的.map文件的问题

项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而生成的.map后缀的文件，就可以像未加密的代码一样，准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。但是我们在生产环境是不需要.map文件的，所以可以在打包时不生成这些文件：

在config/index.js文件中，设置productionSourceMap: false,就可以不生成.map文件。

6，fastClick的300ms延迟解决方案

开发移动端项目，点击事件会有300ms延迟的问题。
这里只说下常见的解决思路，不管vue项目还是jq项目，都可以使用fastClick解决。
安装 fastClick:

npm install fastclick -S

在main.js中引入fastClick和初始化:

import FastClick from 'fastclick '
FastClick.attach(document.body) // 使用fastclick

7，路由懒加载（也叫延迟加载）

路由懒加载可以帮我们在进入首屏时不用加载过度的资源，从而减少首屏加载速度。

路由文件中，非懒加载写法：

export default new Router({
  routes: [{
    path: '/axios',
    name:'axios',
    component: () => import(/* webpackChunkName: "about" */ './../components/axios.vue')
    meta：{title: '用户'}
}]

懒加载写法：

export default new Router({
  routes: [{
    path: '/axios',
    name:'axios',
    component: resolve => require(['./../components/axios.vue'], resolve )
    meta：{title: '用户'}
}]

8，路由拆分管理

拆分条件：开发一些功能点较多的C端项目，路由可以会有一百甚至几百个，那么此时将路由文件进行拆分是很有必要的

将路由的文件，按照模块拆分，这样方便路由的管理
更主要的是方便多人开发

router // 路由文件
   index.js // 路由的入口文件
   modules  // 存放各个模块的路由文件
     public.js  // 公共模块
     user.js   // 用户模块

index.js 文件

import Vue from 'vue'
import Router from 'vue-router'
// 引入模块路由
import PUBLIC from './modules/public'
import USER from './modules/user'
Vue.use(Router)

// 定义路由
const router = new Router({
  mode: 'history',
  routes: [
    ...PUBLIC,
    ...USER
  ]
})

// 路由变化时
router.beforeEach((to,from,next)=>{
  if(document.title !== to.meta.title){
    // 如何在页面切换时，自动修改页面标题的操作。
    document.title = to.meta.title
  }
  next()
})

export default router // 暴露路由

注：而后引入你根据路由模块划分的各个js文件，然后在实例化路由的时候，在routes数组中，将导入的各个文件通过结构赋值的方法取出来。最终的结果和正常的写法是一样的。

user.js：

export default [
  {
    path: '/user/index',
    name:'userIndex',
    component: resolve => require(['./../components/userIndex.vue'], resolve ), 
    meta: {title: '用户'}
  }, 
  {
    path: '/user/detail',
    name:'userDetail',
    component: resolve => require(['./../components/userDetail.vue'], resolve ),
    meta: {title: '用户详情'}
  }
]