# Vue 项目常见问题及解决方法

列表进入详情页传参问题

# 列表进入详情页的传参问题。

例如商品列表页面前往商品详情页面，需要传一个商品 id;

<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>

c 页面的路径为http://localhost:8080/#/detail?id=1，可以看到传了一个参数 id=1，并且就算刷新页面 id 也还会存在。此时在 c 页面可以通过 id 来获取对应的详情数据，获取 id 的方式是this.$route.query.id.

vue 传参方式有：query、params+动态路由传参。

说下两者的区别：

1.query 通过 path 切换路由，params 通过 name 切换路由

<!-- query通过path切换路由 -->
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
<!-- params通过name切换路由 -->
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

2.query 通过 this.$route.query来接收参数，params 通过this.$route.params 来接收参数。

// query 通过 this.$route.query接收参数
created () {
    const id = this.$route.query.id;
}

// params 通过 this.$route.params来接收参数
created () {
    const id = this.$route.params.id;
}
```   

3.query 传参的 url 展现方式：`/detail?id=1&user=123&identity=1&更多参数`.
        
params ＋动态路由的 url 方式：`/detail/123`.

4.params 动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页.

```javascript
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}

注意，params 传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的，因为你总不可能要求用户不能刷新页面吧。例如：

// 定义的路由中，只定义一个 id 参数
{
path: 'detail/:id',
name: 'Detail',
components: Detail
}

<!-- template 中的路由传参， -->
<!-- 传了一个 id 参数和一个 token 参数 -->
<!-- id 是在路由中已经定义的参数，而 token 没有定义 -->
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往 Detail 页面</router-link>

// 在详情页接收
created () {
// 以下都可以正常获取到
// 但是页面刷新后，id 依然可以获取，而 token 此时就不存在了
const id = this.$route.params.id;
    const token = this.$route.params.token;
}

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

proxyTable: {
      // 用‘/api’开头，代理所有请求到目标服务器
      '/api': {
        target: 'http://jsonplaceholder.typicode.com', // 接口域名
        changeOrigin: true, // 是否启用跨域
        pathRewrite: { //
          '^/api': ''
        }
      }
}

# axios 封装和 api 接口的统一管理

axios 的封装，主要是用来帮我们进行请求的拦截和响应的拦截。在请求的拦截中我们可以携带 userToken，post 请求头、qs 对 post 提交数据的序列化等。在响应的拦截中，我们可以进行根据状态码来进行错误的统一处理等等。axios 接口的统一管理，是做项目时必须的流程。这样可以方便我们管理我们的接口，在接口更新时我们不必再返回到我们的业务代码中去修改接口。

# fastClick 的 300ms 延迟解决方案

开发移动端项目，点击事件会有 300ms 延迟的问题。至于为什么会有这个问题，请自行百度即可。

这里只说下常见的解决思路，不管 vue 项目还是 jq 项目，都可以使用 fastClick 解决。安装 fastClick:

npm install fastclick -S

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

import FastClick from "fastclick"; // 引入插件
FastClick.attach(document.body); // 使用 fastclick

# 路由懒加载

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

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

import Index from "@/page/index/index";
export default new Router({
	routes: [
		{
			path: "/",
			name: "Index",
			component: Index,
		},
	],
});

路由懒加载写法：

export default new Router({
	routes: [
		{
			path: "/",
			name: "Index",
			component: (resolve) => require(["@/view/index/index"], resolve),
		},
	],
});

# 详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷新数据的实践

这样一个场景：有三个页面，首页/或者搜索页，商品分类页面，商品详情页。我们希望从首页进入分类页面时，分类页面要刷新数据，从分类进入详情页再返回到分类页面时，我们不希望刷新，我们希望此时的分类页面能够缓存已加载的数据和自动保存用户上次浏览的位置。之前在百度搜索的基本都是 keep-alive 处理的，但是总有那么一些不完善，所以自己在总结了之后进行了如下的实践。解决这种场景需求我们可以通过 vue 提供的 keepAlive 属性。这里直接送上一篇处理这个问题的传送门

# CSS 的 scoped 私有作用域和深度选择器(样式穿透)

大家都知道当

← Vue 常考基础知识点前端性能优化 →