vue中的this.$router.push()路由傳值方式

更新時(shí)間：2023年10月07日 10:14:01 作者：發(fā)漸稀

這篇文章主要介紹了vue中的this.$router.push()路由傳值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

范例

原理：想要導(dǎo)航到不同的 URL，可以使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶(hù)點(diǎn)擊瀏覽器后退按鈕時(shí)，會(huì)回到之前的 URL。

首先呢！先來(lái)描述一下這東西能干什么？這是路由的編程式導(dǎo)航，通過(guò)觸發(fā)事件可以實(shí)現(xiàn)從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的功能（或者說(shuō)是從當(dāng)前路由導(dǎo)航到指定的URL），并且可以在跳轉(zhuǎn)時(shí)攜帶參數(shù)。

第一步

配置好 路由文件（router文件夾下的index.js等文件）、接口文件（api文件夾下的一系列js文件，一般api文件夾下的文件和views文件夾下的文件名是一一對(duì)應(yīng)的，方便頁(yè)面對(duì)應(yīng)接口）。

路由文件配置好之后，編程式導(dǎo)航才可以正常進(jìn)行跳轉(zhuǎn)，才能正常工作。

//范例中的路由文件,這里僅僅截取了一部分代碼，這部分代碼僅僅為本文中的范例服務(wù)，刪除了非范例中的代碼。
 // 基本信息
  {
    path: "/basics",
    component: Layout,
    redirect: "/basics/company",
    name: "Basics",
    meta: {
      title: "基本信息",
      icon: "excel",
    },
    children: [
      // 公司列表-所有公司的列表
      {
        path: "company",
        component: (resolve) => require(["@/views/basics/company/index"], resolve),
        name: "Company",
        meta: { title: "公司列表" },
      },
    ],
  },
 // 公司列表中的按鈕
  {
    path: "/basics/company",
    component: Layout,
    redirect: "/basics/company",
    meta: {
      title: "公司列表",
    },
    children: [
      // 部門(mén)列表——具體某一個(gè)公司的部門(mén)列表，而不是全部
      {
        hidden: true,
        path: "companydep",
        component: (resolve) => require(["@/views/basics/company/depart"], resolve),
        name: "Companydep",
        meta: { title: "部門(mén)列表" },
      }
    ]
  },

而接口文件，則是為了保證，跳轉(zhuǎn)到指定頁(yè)面后數(shù)據(jù)的正常顯示，一般情況下，這種自身帶有參數(shù)的跳轉(zhuǎn)，目標(biāo)頁(yè)面會(huì)接受其所傳的參數(shù)，然后打包傳給后端去查詢(xún)數(shù)據(jù)，最后把

// 這里僅僅截取公司部門(mén)頁(yè)（也就是 目標(biāo)頁(yè)面）所用到的接口文件，僅用于輔助理解
//接口需要通過(guò)封裝之后的axios發(fā)給后端，一般來(lái)說(shuō)，封裝的axios中都會(huì)有請(qǐng)求攔截器以及相應(yīng)攔截器
// 部門(mén)接口
//部門(mén)列表
export function departList(query) {
  return request({
    url: '/admin/depart',
    method: 'get',
    params:query
  })
}
//部門(mén)添加
export function addDepart(data) {
  return request({
    url: '/admin/depart',
    method: 'post',
    data:data
  })
}

第二步

在需要使用的地方引入方法，本范例中就是指公司列表頁(yè)，而目標(biāo)頁(yè)面就是部門(mén)頁(yè)。

具體實(shí)現(xiàn)代碼如下：

//公司列表頁(yè)
// 列表中部門(mén)的點(diǎn)擊按鈕
<el-button type="info" size="mini" @click="depatt(scope.row)">部門(mén)</el-button>

//部門(mén)按鈕點(diǎn)擊觸發(fā)事件，傳過(guò)去的值是公司的編號(hào)以及公司名稱(chēng)
depatt(row) {
   this.$router.push({
   name: "Companydep",
   params: { id: row.company_no, companyname: row.name },
   });
}

第三步

當(dāng)點(diǎn)擊完部門(mén)按鈕之后，就會(huì)來(lái)到了該公司的部門(mén)列表頁(yè)。

這就是一個(gè)整個(gè)流程

其運(yùn)行截圖如下：

集體實(shí)現(xiàn)代碼如下：

先理一下邏輯

部門(mén)列表頁(yè)首先需要拿到包裹在路由中傳過(guò)來(lái)的數(shù)據(jù)，對(duì)于本范例而言，就是需要拿到數(shù)據(jù)中的公司編號(hào)，然后在created() 生命周期函數(shù)中調(diào)用對(duì)應(yīng)方法中的接口，把公司編號(hào)作為參數(shù)傳給后端，然后后端根據(jù)公司編號(hào)在數(shù)據(jù)庫(kù)表中去查詢(xún)數(shù)據(jù)，最后把數(shù)據(jù)打包返回給前端，前端的部門(mén)列表頁(yè)接收數(shù)據(jù)之后，再把數(shù)據(jù)展示到公司的部門(mén)列表頁(yè)中。

這樣，我們一旦跳轉(zhuǎn)進(jìn)入部門(mén)列表頁(yè)就會(huì)看到該公司的部門(mén)列表。

//部門(mén)列表頁(yè)
//導(dǎo)入接口，這就是之前接口文件中定義的接口
import {
  departList,
  addDepart,
  deldepart,
  updateDepart,
} from "@/api/commpy/firm";
//生命周期函數(shù)
  created() {
    // 獲取傳過(guò)來(lái)的數(shù)據(jù)，并賦值給本頁(yè)面中的數(shù)據(jù)
    if (this.$route.params.id) {
      this.form.company_no = this.$route.params.id;
      this.queryParams.company_no = this.$route.params.id;
      this.queryParams.company_name = this.$route.params.companyname;
      this.getList();
    }
  }
//獲取部門(mén)列表的方法
getList() {
      departList(this.queryParams).then((res) => {
        this.tableData = res.data.data;
        this.myPages.total = res.data.total;
        this.myPages.pageSize = res.data.per_page;
        this.myPages.pageNum = res.data.last_page;
      });
    }
//最后，把tableData中的數(shù)據(jù)展示在表格中，就完成了。

保真"芝士"

好的，范例僅僅只是小試牛刀，不足掛齒；下面上正菜。

主要步驟

先做個(gè)主要步驟的總結(jié)

配置接口，配置路由文件
在需要使用的地方引入方法（觸發(fā)事件）
在原頁(yè)面中觸發(fā)事件，把需要傳給目標(biāo)頁(yè)面的數(shù)據(jù)塞進(jìn)this.$router.push中
在目標(biāo)頁(yè)面中從this.$route.query/param中取出數(shù)據(jù)，然后用取到的數(shù)據(jù)傳給后端 …

this.$router.push()的參數(shù)規(guī)則

1、字符串路徑

//  路徑/home對(duì)應(yīng)router目錄下index.js中定義的path屬性值
this.$router.push('/home');

2、帶有路徑的對(duì)象

//  對(duì)應(yīng)router目錄下index.js中定義的path
this.$router.push({path:'/home'});

3、命名的路由，并加上參數(shù)，讓路由建立 url

// name對(duì)應(yīng)router目錄下index.js中定義的name  params里面放置的是我們要傳遞過(guò)去的參數(shù)
this.$router.push({name:'Home',params:{user:'david'}});

4、帶查詢(xún)參數(shù)，結(jié)果是 /register?plan=private

// 帶查詢(xún)參數(shù)，傳遞過(guò)去的內(nèi)容會(huì)自動(dòng)拼接變成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

5、帶 hash，結(jié)果是 /about#team

router.push({ path: '/about', hash: '#team' })

參數(shù)的接收

當(dāng)我們使用params進(jìn)行傳參時(shí)，只需在接收參數(shù)的地方使用 this.$route.params 進(jìn)行接收即可

//傳參
this.$router.push({name:'Home',params:{user:'david'}});
// 在name為Home的組件中接收參數(shù)
const id=this.$route.params.id;
console.log(this.$route.params);//打印結(jié)果為{user:'david'}

當(dāng)我們使用query傳參時(shí)，只需在接收參數(shù)的地方使用 this.$route.query 進(jìn)行接收即可，用法同上?。?！

這里有一個(gè)小細(xì)節(jié)：$符號(hào)后面跟的是route不是router，跳轉(zhuǎn)的時(shí)候 $后面跟的是router！！！

注意事項(xiàng)

1、query傳參的參數(shù)會(huì)帶在url后邊展示在地址欄(/home?user=david)，params傳參的參數(shù)不會(huì)展示到地址欄

2、this.$route.query（刷新頁(yè)面后參數(shù)不會(huì)丟失），this.$route.params（刷新頁(yè)面后參數(shù)會(huì)丟失），因此可以考慮使用本地存儲(chǔ)解決這個(gè)問(wèn)題。

3、如果提供了 path ， params 會(huì)被忽略，上述例子中的 query 并不屬于這種情況。

取而代之的是下面例子的做法，你需要提供路由的 name 或手寫(xiě)完整的帶有參數(shù)的 path ：

const username = 'eduardo'
// 我們可以手動(dòng)建立 url，但我們必須自己處理編碼
router.push(`/user/${username}`) // -> /user/eduardo
// 同樣
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的話(huà)，使用 `name` 和 `params` 從自動(dòng) URL 編碼中獲益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能與 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user