乐趣区

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

jiezi

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 接口的对立治理，是做我的项目时必须的流程。这样能够不便咱们治理咱们的接口，在接口更新时咱们不用再返回到咱们的业务代码中去批改接口。
因为这里内容略微多一些，放在另一篇文章，这里送上链接。

退出移动版