vue 擷取url位址的參數_總結vue問題

（1）、vue的面試題

2018 vue前端面試題 - 實作豐盛 - 部落格園​www.cnblogs.com

vuex實作購物車效果

https://blog.csdn.net/qq_35430000/article/details/79916110​blog.csdn.net

vue 動态路由傳值

vue動态路由配置，vue路由傳參 - 程式設計讓我快樂 - 部落格園​www.cnblogs.com

vue動态路由配置，vue路由傳參動态路由：

　　當我們很多個頁面或者元件都要被很多次重複利用的時候，我們的路由都指向同一個元件，這時候從不同元件進入一個"共用"的元件，并且還要傳參數，渲染不同的資料

　　這就要用到動态路由跟路由傳參了！

首先我們來了解下router-link這個元件：

　　簡單來說，它是個導航器，利用to屬性導航到目标元件，并且在渲染的時候會自動生成一個a标簽，當然官方也有說明，加個tag标簽屬性就可以渲染不同的标簽，可以浏覽器端檢視到

　　并且當一個導航器被激活的時候，會自動加上一個css的激活樣式，可以全局在路由配置中設定linkActiveClass屬性，屬性名就是樣式css名，一般寫為active

　　現在基本了解了router-link，先講一下動态路由配置吧

我們在配置路由的時候，将目标元件的路徑先配置好，如：

比如多個路由都要進入List元件，這時候在配置路由路徑後加個:id(id可随便取名，辨別),這個屬性id可以在$route.params.id中擷取，例如：

目前這個child元件要進入，以上配置的id就等于on；這時候在List元件中列印出$route.params.id就可以得到這個屬性值on

這個時候，不同元件進入同一目标元件時就可以得到辨別跟備注了，也可以利用這個來傳遞一些正常的參數

接着往下看，帶參數的路由，跟擷取傳來的參數值

當router-link被激活點選時，會将目前的to的值push到router對象當中(路由棧),是以這個值可以是string也可以是obj

傳參數的時候，我們就寫成對象的形式，用到v-bind的js表達式

此時整個的了解可以為：我是child元件過來的，而且我還帶來了我的名字，我叫child

在List元件當中去擷取這個參數值跟id的值

如果是不同的元件過來的，可以設定不同的id值，隻要在目标元件擷取屬性id的值就可以了，參數就利用query.屬性值來擷取

3、axios和ajax的差別

1.差別 axios是通過promise實作對ajax技術的一種封裝，就像jQuery實作ajax封裝一樣。 簡單來說： ajax技術實作了網頁的局部資料重新整理，axios實作了對ajax的封裝。 axios是ajax ajax不止axios。

Ajax：

Ajax 即“

A

synchronous

J

avascript

A

nd

X

ML”（異步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。

Ajax = 異步 JavaScript 和 XML（标準通用标記語言的子集）。

Ajax 是一種用于建立快速動态網頁的技術。

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

通過在背景與伺服器進行少量資料交換，Ajax 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 Ajax）如果需要更新内容，必須重載整個網頁頁面。

$.ajax({
            url: 'http://jsonplaceholder.typicode.com/users',
            type: 'get',
            dataType: 'json',
            data: {
                //'a': 1,
                //'b': 2,
            },
            success: function (response) {
                console.log(response)；
            }
        })
           

axios：

用于浏覽器和node.js的基于Promise的HTTP用戶端

1. 從浏覽器制作XMLHttpRequests

2. 讓HTTP從node.js的請求

3. 支援Promise API

4. 攔截請求和響應

5. 轉換請求和響應資料

6. 取消請求

7. 自動轉換為JSON資料

8. 用戶端支援防止XSRF

axios({
            url: 'http://jsonplaceholder.typicode.com/users',
            method: 'get',
            responseType: 'json', // 預設的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
        })
           

2.優缺點： ajax： 本身是針對MVC的程式設計,不符合現在前端MVVM的浪潮 基于原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案 JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務 axios： 從 node.js 建立 http 請求 支援 Promise API 用戶端支援防止CSRF

三、vuejs中引入項目中的靜态檔案,需要用

require

{
              name: "xx",
              icon: require("./assets/img/hstpBox/shebeiguanli.png"),
            }
           

四、請求背景的接口封裝的

import axios from './request.js'
import qs from 'qs';

export function getAjax(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.get(url, {
        params: params
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        if (err.response) {
          this.$message({
            type: 'error',
            message: err.response.data.message
          });
        }
        reject(err)
      })
  })
}

export function postAjax(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.post(url, params, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        if (err.response) {
          this.$message({
            type: 'error',
            message: err.response.data.message
          });
        }
        reject(err)
      })
  })
}

export function postAjaxS(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.post(url, qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        reject(err)
      })
  })
}

export function putAjax(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.put(url, qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        reject(err)
      })
  })
}

export function http(url, type, headers, params = {}) {
  return new Promise((reslove, reject) => {
    console.log(headers)
    axios({
      url: url,
      method: type,
      data: params,
      headers: {
        'Content-Type': headers
      },
    }).then(res => {
      reslove(res)
    }).catch(err => {
      if (err.response) {
        this.$message({
          type: 'error',
          message: err.response.data.message
        });
      }
      reject(err)
    })
  })
}


調取方式

that
        .$pSAjax(
          this.url +
            `xxxx?currPage=${currPage}&pSize=${pSize}&pContent=${pContent}`
        )
        .then(res => {
          if (res.resultCode == "success") {
            that.tableData = res.data.list;
            that.totalDataNumber = res.data.totalSize;
          } else {
            this.$message({
              message: "擷取資料失敗",
              type: "error",
              showClose: true,
              duration: 3000
            });
          }
        })
        ["catch"](() => {
          this.$message({
            message: "擷取資料失敗",
            type: "error",
            showClose: true,
            duration: 3000
          });
        });