快捷導(dǎo)航

vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route的各種語法

更新時間：2023年10月14日 14:47:44 作者：莫妮卡1949

this.$router?相當(dāng)于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧

一 this.$router 和 this. $route 區(qū)別

vue官方文檔說明:
通過注入路由器，我們可以在任何組件內(nèi)通過 this. r o u t e r 訪問路由器，也可以通過 t h i s . router 訪問路由器，也可以通過 this. router訪問路由器，也可以通過this.route 訪問當(dāng)前路由.

通過打印出: this.$router 和 this. $route :

this.$router(路由實例) : 是VueRouter的實例.包含了很多屬性和對象（比如 history 對象），任何頁面都可以調(diào)用其 push(), replace(), go() 等方法。

this.$route: 表示當(dāng)前路由對象，每一個路由都會有一個 route 對象，是一個局部的對象，可以獲取對應(yīng)的 name, path, meta, params, query 等屬性。

1.1 路由實例的方法

1全局掛載路由實例

// 全局注冊的路由
Vue.use(VueRouter)

2 路由實例方法push

詳見下文: 二路由傳參的2種方式 (即:路由實例(this.$router)的push方法)

3 路由實例方法go

// 頁面路由跳轉(zhuǎn) 前進(jìn)或者后退
this.$router.go(-1) // 后退

4 路由實例方法replace

//push方法會向 history 棧添加一個新的記錄，而replace方法是替換當(dāng)前的頁面，
不會向 history 棧添加一個新的記錄
<router-link to="/05" replace>05</router-link>
// 一般使用replace來做404頁面
this.$router.replace('/')

二路由傳參的2種方式 (即:路由實例(this.$router)的push方法)

1 分為2大類: query 和params 2種方式.
2 每種方式中又分為2類, < router-link to=’…’ > 和 this.$router.push.
3 點擊< router-link :to="…"> 等同于調(diào)用 this. $router.push(…).

2.1 第1類: params (類似post請求參數(shù)在路徑不可見) 第1種: this. $router.push(…)

傳參&獲取:

傳參:
    const userId = '123';
    //命名的路由
    this.$router.push({name:'user', params:{userId}});  //---> /user/123
    
    ***這里的 params 不生效 (重點情況)***
    this.$router.push({path:'/user', params:{userId}});  //---> /user
    
獲取參數(shù)：
this.$route.params.userId

url 形式：url 不帶參數(shù).
http:localhost:8080/#/user

總結(jié): params傳參時, 提供path, params將會被忽略,
push 里面只能是 name:‘xxx’，不能是 path:’/xxx’，
因為 params 只能用 name 來引入路由，如果這里寫成了 path ,接收參數(shù)頁面會是: undefined;

第2種: < router-link :to="…">

傳參&獲取:

傳參:
<router link ：to='/gameInfo/'+uid+"/"+gameid />

//路由中：
{
path:'/gameInfo/':uid/:gameid
name:gameInfo,
component:()=>import('./views/gameInfo')
}

獲取參數(shù):
//像這樣在url中傳入一個參數(shù)，這個參數(shù)可以是data中的一個數(shù)據(jù)，
//也可以是一個動態(tài)的參數(shù)，在gameInfo頁面接收參數(shù)的時候用params接收，比如：
this.$route.params.uid  //這里的uid是路由中：后邊的參數(shù)

2.2 第2類: query(類似get請求參數(shù)在路徑可見) 第1種: this. $router.push(…)

傳參&獲取:

傳參: (path 只和 query搭配, path不和params搭配)
this.$router.push({path:'/user', query:{userId: '123'}});
獲取參數(shù)：
this.$route.query.userId

url形式:url中帶參數(shù).
http:localhost:8080/#/user?userId=123
獲取參數(shù):
this.$route.query.userId

總結(jié):如果提供path, 需要使用 query方式傳參. (path 只和 query搭配, path不和params搭配)

第2種: < router-link :to="…">

傳參:
<router link to='/gameInfo?uid='+uid />
獲取:
this.$route.query.uid

注意: 以 / 開頭的嵌套路徑會被當(dāng)作根路徑。這讓你充分的使用嵌套組件而無須設(shè)置嵌套的路徑。

2.3 只跳轉(zhuǎn),不傳參數(shù)

// 路徑直接寫:字符串
this.$router.push('home')  // 只是跳轉(zhuǎn),不傳參數(shù)
//對象
this.$router.push({path:'home'})   // // 只是跳轉(zhuǎn),不傳參數(shù)

2.4 監(jiān)聽路由

(1)在組件內(nèi)，即 this.$route
(2)在 $route 觀察者回調(diào)內(nèi) router.match(location) 的返回值
(3)導(dǎo)航守衛(wèi)的參數(shù)：

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息對象
})

watch: {
  $route(to, from) {
     // to 和 from 都是 路由信息對象
  }
}

三 this.$route的各種語法

this. $route.query
this. $route.params
this. $route.path
this. $route.matched

  <router-link
     class="icon-go"
     :to="{ name: '首頁'}"
     v-if="$route.matched[0].path=='/category'">
    </router-link>
    <span class="icon-go" @click="$router.go(-1)" v-else></span>
    <slot name="title"></slot>

$route.path
類型: string
字符串，對應(yīng)當(dāng)前路由的路徑，總是解析為絕對路徑，如 /foo/bar。

$route.params
類型: Object
一個 key/value 對象，包含了動態(tài)片段和全匹配片段，如果沒有路由參數(shù)，就是一個空對象。

$route.query
類型: Object
一個key/value 對象，表示 URL 查詢參數(shù)。例如，對于路徑/foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數(shù)，則是個空對象。

$route.matched
類型:Array
一個數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄。路由記錄就是 routes 配置數(shù)組中的對象副本 (還有在 children 數(shù)組)。

const router = new VueRouter({
  routes: [
    // 下面的對象就是路由記錄
    { path: '/foo', 
    component: Foo,
    children: [
        // 這也是個路由記錄
        { path: 'bar', 
        component: Bar }
      ]
    }
  ]
})

當(dāng) URL 為 /foo/bar，$route.matched 將會是一個包含從上到下的所有對象 (副本)。

$route.fullPath
路由是：/path/:type真正路徑是：/path/list
path匹配路徑: /path/list
fullPath匹配路由: /path/:type

$route.meta (路由原信息meta)

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true ,keepAlive:true}//1.權(quán)限 2.內(nèi)存緩存，單頁面切換
        }
      ]
    }
  ]
})

先理解什么是路由記錄：路由記錄就是 routes 配置數(shù)組中的對象副本 (還有在 children 數(shù)組)。

上方代碼中的路由記錄見下方：

    //一級路由 
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true ,keepAlive:true}//1.權(quán)限 2.內(nèi)存緩存，單頁面切換
        }
      ]
    }
 
 
//一級路由的子路由
    { path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }
 
//兩者都是    路由記錄

定義路由的時候可以配置 meta 字段

meta這個對象中的屬性可以自由定義 ,
取的時候就用 this. $route.meta.屬性名

根據(jù)上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄
一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導(dǎo)航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組。
檢查路由記錄中的 meta 字段，我們需要遍歷 $route.matched

$route.matched
一個數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄
一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導(dǎo)航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組

路由元信息 .meta $route.matched 搭配路由守衛(wèi) 進(jìn)行驗證

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

到此這篇關(guān)于vue this.$router和this.$route區(qū)別解析及路由傳參的2種方式 && this.$route的各種語法的文章就介紹到這了,更多相關(guān)vue this.$router 與 this.$route 區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: