vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue this.$router 与 this.$route 区别

vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route的各种语法

作者:莫妮卡1949

this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法,本文给大家介绍Vue中this.$router与this.$route的区别 及push()方法,感兴趣的朋友跟随小编一起看看吧

一 this.$router 和 this. $route 区别

vue官方文档说明:
通过注入路由器,我们可以在任何组件内通过 this. r o u t e r 访 问 路 由 器 , 也 可 以 通 过 t h i s . router 访问路由器,也可以通过 this. router访问路由器,也可以通过this.route 访问当前路由.

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

this.$router(路由实例) : 是VueRouter的实例.包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法。

this.$route: 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, meta, params, query 等属性。

1.1 路由实例的方法

1全局挂载路由实例

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

2 路由实例方法push

详见下文: 二 路由传参的2种方式 (即:路由实例(this.$router)的push方法)

3 路由实例方法go

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

4 路由实例方法replace

//push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
不会向 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="…"> 等同于调用 this. $router.push(…).

2.1 第1类: params (类似post请求 参数在路径不可见) 第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
    
获取参数:
this.$route.params.userId

url 形式:url 不带参数.
http:localhost:8080/#/user

总结: params传参时, 提供path, params将会被忽略,
push 里面只能是 name:‘xxx’,不能是 path:’/xxx’,
因为 params 只能用 name 来引入路由,如果这里写成了 path ,接收参数页面会是: undefined;

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

传参&获取:

传参:
<router link :to='/gameInfo/'+uid+"/"+gameid />

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

获取参数:
//像这样在url中传入一个参数,这个参数可以是data中的一个数据,
//也可以是一个动态的参数,在gameInfo页面接收参数的时候用params接收,比如:
this.$route.params.uid  //这里的uid是路由中:后边的参数

2.2 第2类: query(类似get请求 参数在路径可见) 第1种: this. $router.push(…)

传参&获取:

传参: (path 只和 query搭配, path不和params搭配)
this.$router.push({path:'/user', query:{userId: '123'}});
获取参数:
this.$route.query.userId

url形式:url中带参数.
http:localhost:8080/#/user?userId=123
获取参数:
this.$route.query.userId

总结:如果提供path, 需要使用 query方式传参. (path 只和 query搭配, path不和params搭配)

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

传参:
<router link to='/gameInfo?uid='+uid />
获取:
this.$route.query.uid

注意: 以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

2.3 只跳转,不传参数

// 路径直接写:字符串
this.$router.push('home')  // 只是跳转,不传参数
//对象
this.$router.push({path:'home'})   // // 只是跳转,不传参数

2.4 监听路由

(1)在组件内,即 this.$route
(2)在 $route 观察者回调内 router.match(location) 的返回值
(3)导航守卫的参数:

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
字符串,对应当前路由的路径,总是解析为绝对路径,如 /foo/bar。

$route.params
类型: Object
一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。

$route.query
类型: Object
一个key/value 对象,表示 URL 查询参数。例如,对于路径/foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

$route.matched
类型:Array
一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    { path: '/foo', 
    component: Foo,
    children: [
        // 这也是个路由记录
        { path: 'bar', 
        component: Bar }
      ]
    }
  ]
})

当 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.权限 2.内存缓存,单页面切换
        }
      ]
    }
  ]
})

先理解什么是路由记录 : 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

上方代码中的路由记录见下方:

    //一级路由 
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存,单页面切换
        }
      ]
    }
 
 
//一级路由的子路由
    { path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }
 
//两者都是    路由记录

定义路由的时候可以配置 meta 字段

meta这个对象中的属性可以自由定义 ,
取的时候就用 this. $route.meta.属性名

根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。
检查路由记录中的 meta 字段 ,我们需要遍历 $route.matched

$route.matched
一个数组,包含当前路由的所有嵌套路径片段的路由记录
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组

路由元信息 .meta $route.matched 搭配路由守卫 进行验证

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() // 确保一定要调用 next()
  }
})

到此这篇关于vue this.$router和this.$route区别解析及路由传参的2种方式 &amp;&amp; this.$route的各种语法的文章就介绍到这了,更多相关vue this.$router 与 this.$route 区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文