关于javascript:VUE项目中各种问题总结及解决方案

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

例如商品列表页面返回商品详情页面，须要传一个商品id;

<router-link :to="{path: 'detail', query: {id: 1}}">返回detail页面</router-link>复制代码

页面的门路为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动静路由传参，肯定要在路由中定义参数，而后在路由跳转的时候必须要加上参数，否则就是空白页面：

{      
    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;
}

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

vue-cli配置文件vue.config.js中配置proxy属性

proxyTable: {
      // 用'/api'结尾，代理所有申请到指标服务器
      '/api': {
        target: 'http://jsonplaceholder.typicode.com', // 接口域名
        changeOrigin: true, // 是否启用跨域
        pathRewrite: { 
          '^/api': ''
        }
      }
}
// 如下图的接口封装，替换'/api'为上述target地址
// http://jsonplaceholder.typicode.com/api/xxxxxxxxxxx

留神：配置好后肯定要敞开原来的server，从新npm run dev启动我的项目。不然有效。

3、axios封装和api接口的对立治理

axios的封装，次要是用来帮咱们进行申请的拦挡和响应的拦挡。
在申请的拦挡中咱们能够携带userToken，post申请头、qs对post提交数据的序列化等。
在响应的拦挡中，咱们能够进行依据状态码来进行谬误的对立解决等等。
axios接口的对立治理，是做我的项目时必须的流程。这样能够不便咱们治理咱们的接口，在接口更新时咱们不用再返回到咱们的业务代码中去批改接口。
因为这里内容略微多一些，放在另一篇文章，这里送上链接。