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

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

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

范例

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

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

第一步

配置好 路由文件（router文件夾下的index.js等文件）、接口文件（api文件夾下的一系列js文件，一般api文件夾下的文件和views文件夾下的文件名是一一對應(yīng)的，方便頁面對應(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: [
      // 部門列表——具體某一個公司的部門列表，而不是全部
      {
        hidden: true,
        path: "companydep",
        component: (resolve) => require(["@/views/basics/company/depart"], resolve),
        name: "Companydep",
        meta: { title: "部門列表" },
      }
    ]
  },

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

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

第二步

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

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

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

//部門按鈕點擊觸發(fā)事件，傳過去的值是公司的編號以及公司名稱
depatt(row) {
   this.$router.push({
   name: "Companydep",
   params: { id: row.company_no, companyname: row.name },
   });
}

第三步

當(dāng)點擊完部門按鈕之后，就會來到了該公司的部門列表頁。

這就是一個整個流程

其運行截圖如下：

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

先理一下邏輯

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

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

//部門列表頁
//導(dǎo)入接口，這就是之前接口文件中定義的接口
import {
  departList,
  addDepart,
  deldepart,
  updateDepart,
} from "@/api/commpy/firm";
//生命周期函數(shù)
  created() {
    // 獲取傳過來的數(shù)據(jù)，并賦值給本頁面中的數(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();
    }
  }
//獲取部門列表的方法
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ù)展示在表格中，就完成了。

保真"芝士"

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

主要步驟

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

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

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

1、字符串路徑

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

2、帶有路徑的對象

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

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

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

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

// 帶查詢參數(shù)，傳遞過去的內(nèi)容會自動拼接變成/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ù)的地方使用 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ù)的地方使用 this.$route.query 進(jìn)行接收即可，用法同上！??！

這里有一個小細(xì)節(jié)：$符號后面跟的是route不是router，跳轉(zhuǎn)的時候 $后面跟的是router?。。?/p>

注意事項

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

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

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

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

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