2. 程式人生 > 實用技巧 >VUE跳轉路由攜帶引數 / 路由傳參 / 的幾種方法 . VUE如何怎麼進行路由傳遞引數的程式碼

VUE跳轉路由攜帶引數 / 路由傳參 / 的幾種方法 . VUE如何怎麼進行路由傳遞引數的程式碼

阿新 • • 發佈：2020-08-17

簡述

由於需要使用到路由傳遞引數,所以查到一些VUE傳遞引數的幾種方法,文章裡總結了六種.

具體的文件可以去文件上檢視.但是我讀下來有一個體會 : 示例有些少.描述的比較精簡.

以下貼出程式碼並有簡要的概述.從程式碼的角度去描述使用VUE傳遞引數的幾種方法.

程式碼可以直接貼上到本地環境中進行檢視與除錯,方便直觀的檢視效果.

推薦閱讀VUE官方文件:路由元件傳參

程式碼

方式一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 時間 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        接收引數的第一種方式 
        */
        const Foo = {
            template: '<div>路由傳遞的引數是:{{$route.name}}</div>', // 通過$route接收
        }
        const Bar = {
            template: '<div>路由傳遞的引數是:{{$route.name}}</div>',
        }

        const routes = [
            { path: '/foo', component: Foo, name: "Foo" }, //  傳遞的name的值是這裡的值
            { path: '/bar', component: Bar, name: "Bar" },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

$route包含了當前路由的一些可讀資訊.可以通過$route.name動態的獲取到當前路由的name值.

方式二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link :to="{name:'Foo',params:{id:'testid',username:'hello'}}">Go to Foo</router-link>
            <router-link :to="{name:'Bar',query:{id:'notallowsend',username:'band'}}">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 時間 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        接收引數的第一種方式
        */
        const Foo = {
            template: '<div>Foo接收到路由傳遞的引數是:{{$route.params.id}} / {{$route.params.username}}</div>', // 通過$route接收
        }
        const Bar = {
            template: '<div>Bar接收到的路由傳遞的引數是:{{$route.query.id}} / {{$route.query.username}}</div>',
        }

        const routes = [
            { path: '/foo', component: Foo, name: "Foo" }, //  傳遞的name的值是這裡的值
            { path: '/bar', component: Bar, name: "Bar" },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

通過router-link標籤繫結路由的name值,並使用 params | query進行傳遞引數.並在路由的元件中使用$route.params | $route.query接收引數.傳遞要與接收的key一致.

方式三

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo/hello">Go to Foo</router-link>
            <router-link to="/bar/sayhi">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 時間 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        通過URL傳遞引數
        */
        const Foo = {
            template: '<div>Foo接收到路由傳遞的引數是:{{$route.params.respects}}</div>', // 通過$route接收
        }
        const Bar = {
            template: '<div>Bar接收到的路由傳遞的引數是:{{$route.params.respects}}</div>',
        }

        const routes = [
            { path: '/foo/:respects', component: Foo, name: "Foo" }, //  傳遞的name的值是這裡的值 => respects
            { path: '/bar/:respects', component: Bar, name: "Bar" },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>
</html>

通過路由傳送引數,並使用 $route.params接收引數

方式四

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo/123">Go to Foo</router-link>
            <router-link to="/bar/345">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 時間 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        通過URL傳遞引數
        */
        const Foo = {
            props: ['id'],
            template: '<div>Foo接收到路由傳遞的引數是:{{$route.params.id}} / {{id}}</div>', // 通過$route接收
        }
        const Bar = {
            props: ['id'],
            template: '<div>Bar接收到的路由傳遞的引數是:{{$route.params.id}} / {{id}}</div>',
        }

        const routes = [
            { path: '/foo/:id', component: Foo, name: "Foo", props: true }, //  傳遞的name的值是這裡的值
            { path: '/bar/:id', component: Bar, name: "Bar", props: true },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

通過路由傳遞引數,與方式四不同的是.這裡使用props接收引數.

而在vue官網的文件中有這麼一句話:如果 props 被設定為 true，route.params 將會被設定為元件屬性。這裡的元件屬性我的理解就是$route.params將會被設定元件的props屬性.並可以使用props進行接收.而這裡的ture,也許指的是truthy.props可以設定為 1 或者是 一個空物件都可以達到true的作用.因為它們被隱式轉換為true了.

方式五

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo?q=123">Go to Foo</router-link>
            <router-link to="/bar?q=456">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 時間 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************

        /*
        通過URL傳遞引數
        */
        const Foo = {
            props: ['query'],
            template: '<div @click="displayArg">Foo接收到路由傳遞的引數是:{{$route.params.query  }} / {{query}}</div>', // 通過$route接收
            methods: {
                displayArg() {

                    console.log(this.$route.params);
                }
            },
        }
        const Bar = {
            props: ['query'],
            template: '<div>Bar接收到的路由傳遞的引數是:{{$route.params.query}} / {{query}}</div>',
        }

        const routes = [
            { path: '/foo', component: Foo, name: "Foo", props: (route) => ({ query: route.query.q }) }, //  傳遞的name的值是這裡的值
            { path: '/bar', component: Bar, name: "Bar", props: { id: 456 } }, // truely
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

通過URL的查詢引數傳遞引數.而在props是為一個過濾函式的.通過這種方式來傳遞引數.

方式六

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <button @click='goToFoo'>Go to Foo</button>
            <button @click='goToBar'>Go to Bar</button>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>

        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 時間 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        
        /*
        使用路由攜帶引數進行跳轉
        */
        const Foo = {
            template: '<div @click="displayArg">Foo接收到路由傳遞的引數是</div>', // 通過$route接收
            methods: {
                displayArg() {
                    console.log('----------------');
                    console.log(this.$route)
                    console.log(this.$route.params.sex);
                    console.log(this.$route.query.sex);
                }
            },
        };

        const Bar = {
            template: '<div @click="displayArg">Bar接收到的路由傳遞的引數是</div>',
            methods: {
                displayArg() { // $route.params.query接收不到
                    console.log('----------------');
                    console.log(this.$route);
                }
            },
        };

        const routes = [
            { path: '/foo', component: Foo, name: "Foo",props:true}, //  傳遞的name的值是這裡的值
            { path: '/bar', component: Bar, name: "Bar", }, // truely
        ]
        const router = new VueRouter({
            routes
        });
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                goToFoo() {
                    if (this.$route.path == '/foo') {
                        console.log("正處在當前路由中.");
                        return false;
                    }
                    this.$router.push({ name: "Foo", params: { sex: "男" } }); // 使用name跳轉的頁面,使用params進行傳遞與接受.
                    // this.$router.push({ name: "Foo", query: { sex: "男" } }); // 使用name跳轉的頁面,使用query進行傳遞與接收.
                },
                goToBar() {
                    if (this.$route.path == '/bar') {
                        console.log("正處在當前路由中.");
                        return false;
                    }
                    // this.$router.push({ path: "/bar", query: { sex: "女" } }); // 受用path跳轉的頁面,使用query進行傳遞與接受.可以把paramas與query進行互換測試.
                    this.$router.push({ path: "/bar", params: { sex: "女" } }); // 這種不可使用
                }
            },
            router,

        }).$mount('#app');

        /*
        情況總結 : 
        如果是 使用name進行跳轉
            - 如果跳轉的引數設定為params,那麼要使用params進行接收.
            - 如果使用query,要使用query進行接收.但是不推薦這樣使用.
        如果使用 path進行跳轉
            - 只可以使用query進行傳遞引數
            - 
        */
    </script>
</body>
</html>

使用 $this.router.push()進行路由跳轉.之後在被跳轉的頁面中使用$route接收.



參考

相關推薦

VUE跳轉路由攜帶引數 / 路由傳參 / 的幾種方法 . VUE如何怎麼進行路由傳遞引數的程式碼

簡述 由於需要使用到路由傳遞引數,所以查到一些VUE傳遞引數的幾種方法,文章裡總結了六種.

React跳轉路由傳參3種方法和區別

1、params傳參 路由表配置：引數位址列顯示 路由頁面：<Route path=\'/demo/:id\' component={Demo}></Route>//配置 /:id

Vue-router路由傳參三種方法及區別

先有如下場景 點選當前頁的某個按鈕跳轉到另外一個頁面去，並將某個值帶過去

Angular：路由的配置、傳參以及跳轉

①路由的配置 1、首先用腳手架新建一個專案，在路由配置時選擇yes 2、用ng g component建立元件

vue路由傳參以及接收引數的幾種方法

vue路由傳參方式可以劃分為params傳參、query傳參和url字串拼接,首先需要知道路由跳轉並傳參的方式(宣告式導航和程式設計式導航)以及接收路由引數的方法

vue跳轉方式（開啟新頁面）及傳參操作示例

本文例項講述了vue跳轉方式（開啟新頁面）及傳參操作。分享給大家供大家參考，具體如下：

【小程式】---- 頁面間通訊介面，跳轉頁面攜帶引數

一、功能描述： 在 2019 年 7 月 2 日的小程式基礎庫版本更新 v2.7.3 中，小程式新增了一個頁面間通訊的介面，幫助我們的小程式完成不同頁面間資料同步的功能。

vue路由傳參及元件傳參和元件方法呼叫

VUE路由和元件傳參 第一種vue自帶的路由傳參的三種基本方式 1.通過name :id傳參 子元件通過$route.name接收引數

vue跳轉頁面的幾種方法(推薦)

vue跳轉不同頁面的多種方法 1：router-link跳轉 <!-- 直接跳轉 --> <router-link to=\'/testDemo\'>

vue跳轉方式

一.router-link 1.不帶引數 <router-link :to=\"{name:\'name\'}\"></router-link> <router-link :to=\"{path:\'/name\'}\"></router-link>

Vue跳轉到一個新的頁面的多種方法

技術標籤：vuevue跳轉一個新頁面 通過router-link或者button或者a連結的方法 1、router-link路由

react-類元件的路由傳參-7種

react-類元件的路由傳參-7種 react-router-dom版本：\"react-router-dom\": \"5.2.1\" 宣告式導航

uni-app如何頁面傳引數的幾種方法總結

uni.$emit(eventName,OBJECT) 觸發全域性的自定事件。附加引數都會傳給監聽器回撥。

html網頁重定向與跳轉幾種方法【轉】

javaScript 跳轉 方法一:     window.location = "http://www.baidu.com"; 方法二:     document.location = "http://www.baidu.com";

Win10跳轉列表上最近的檔案和位置的方法－組策略

Win10系統如何在跳轉列表中禁用最近的檔案和位置？Win10跳轉列表是在工作列，開始選單和檔案資源管理器中的快速訪問中使用的功能，允許你快速跳轉到最近的文件，或者快速執行特定任務。但是Win10跳轉列表存在隱私問題

vue router分別使用query和params傳參的不同以及重新整理頁面出現的資料消失

技術標籤：前端vuejsvuejavascriptvue.js前端 this.$router.push(path:\'/diyName\',query:{ a:1, b:2,c:3})

android 從Activity跳轉到fragment執行onActivityResult最簡單的解決方法

在開發android中，有些人往往很疑惑，當一個FragmentActivity中有多個Fragment的時候，如a,b,c三個Fragment（碎片），其中b中進行了操作，跳轉到了新的D介面（activity）。但是當D操作完後，返回值到b Fragment（碎

Vue: 兄弟元件利用自定義Bus傳參

vite.config.ts import { defineConfig } from \'vite\' import vue from \'@vitejs/plugin-vue\' import * as path from \'path\'

Vue之使用elementUI的upload上傳元件匯入csv檔案 Vue之使用elementUI的upload上傳元件匯入csv檔案

Vue之使用elementUI的upload上傳元件匯入csv檔案   最近幹活的時候有個需求，需要將csv檔案匯入到mysql資料庫中，前後端框架用的springboot+Vue，元件用的elementUI，下面將分步驟記錄實現過程。

vue元件間傳值的幾種方法

一丶父子元件傳值 先在父元件中給子元件的自定義屬性繫結一個 父元件的變數