- 列表进入详情页的传参问题
- 本地开发环境请求服务器接口跨域的问题
- 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，本地开发环境请求服务器接口跨域的问题
本地开发项目请求服务器接口的时候，因为客户端的同源策略，导致了跨域的问题；那么我们怎么解决？
在项目根目录下，找到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': ''
}
}
}
}
}
注：要注意我们访问接口时，写的是/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库中组件的样式
我们正常写的所有样式，都会被加上[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: '用户详情'}
}
]