Vue路由 路由配置 傳參 獲取引數

2021-09-06 17:16:46 字數 1004 閱讀 7350

this.$route 和 this.$router區別:

this.$route 資訊引數(query、prams)傳參獲取

this.$router 功能函式,go(),push()等方法呼叫

1.匯入和使用路由(main.js):

import router from 'vue-router'

// 使用路由

vue.use(router)

//匯入vue頁面

import routera from '../page/router/routera'

import routerb from '../page/router/routerb'

export default new router(,

]});

引數說明:

name: '名稱,vue頁面可通過name呼叫',

path: '訪問路徑',

component: '具體vue頁面'

2.routera.vue 頁面案例:

跳轉頁面: 

方式一:(:to動態繫結name 或則 path) 頁面自動解析成path位址

去b頁面

方式二:(to="path"),只能指定path值

去b頁面

路由頁面傳入引數:

方式一:(通過query傳入引數,引數通過url get方式拼接)

去b頁面,傳入引數

方式二:(通過params傳入引數,引數通過路徑[/001]形式拼接到url上,如果沒有在路徑配置種使用引數佔位符,url不會拼接,直接展示是具體路由頁面)

去b頁面,params傳入引數

3.routerb.vue 頁面案例

傳入頁面引數:}

活動詳情

}

vue路由傳參及獲取引數總結

動態路由 這裡用來測試,傳了兩個引數username和post id 路由配置 跳轉 this router.push 匹配路徑 user evan 123 傳遞的引數 獲取引數 this route.params.username this route.params.post id通過路由屬性中的...

Vue路由傳參

getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中新增 id來對應 rou ter.push 中pat h攜帶的 引數。在 子元件中 可以使用 來獲取傳 遞的引數 值。th is router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。t...

vue路由傳參

傳參方式一 router link方式 1.path 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航 2.params 是要傳送的引數,引數可以直接key value形式傳遞 3.query 是通過 url 來傳遞引數的同樣是key value形式傳遞 2,3兩...