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

vue-router中route 和router

1. $route对象

image.png
1.1 $route 表示(当前路由信息对象)

表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)。
路由信息对象:即$router会被注入每个组件中,可以利用它进行一些信息的获取。

**1.$route.path**
      字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
**2.$route.params**
      一个 key/value 对象,包含了 动态片段 和 全匹配片段,
      如果没有路由参数,就是一个空对象。
**3.$route.query**
      一个 key/value 对象,表示 URL 查询参数。
      例如,对于路径 /foo?user=1,则有 $route.query.user == 1,
      如果没有查询参数,则是个空对象。
**4.$route.hash**
      当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点
**5.$route.fullPath**
      完成解析后的 URL,包含查询参数和 hash 的完整路径。
**6.$route.matched**
      数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7.$route.name    当前路径名字**
**8.$route.meta  路由元信息
1.2 route object 出现在多个地方:

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

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
})
watch: {
  $route(to, from) {
     // to 和 from 都是 路由信息对象
  }
}

2. $router对象

image.png

全局的路由实例,是router构造方法的实例。
在 Vue 实例内部,你可以通过 $router 访问路由实例

const router = new Router({
  routes: [
    {
      path: "/",
      name: "首页",
      redirect: '/home'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    { path: '*', component: NotFoundComponent }
  ],
  linkActiveClass: "active-router",
  linkExactActiveClass: "exact-router"
})

2.1 全局挂载路由实例

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

2.2 路由实例方法push

// 字符串
      this.$router.push('home')
// 对象
      this.$router.push({ path: 'home' })
// 命名的路由
      this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=123
      this.$router.push({ path: 'register', query: { plan: '123' }})

push方法其实和<router-link :to="...">是等同的。
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
2.2 路由实例方法go

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

2.3 路由实例方法replace

//push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
不会向 history 栈添加一个新的记录

<router-link to="/05" replace>05</router-link>

// 一般使用replace来做404页面
this.$router.replace('/')

作者:Ishmael丶Yoko
链接:https://www.jianshu.com/p/fa0b5d919615
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 回忆: 我们知道,h5的history或者hash帮助我们解决了,变化url跳转页面不发送请求,并且我们能监听到u...
    LoveBugs_King阅读 3,684评论 0 5
  • 一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用 标签编写链接哪?...
    浪里行舟阅读 67,794评论 12 203
  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成,让开发者更加简单的...
    GUAN_one阅读 3,777评论 0 2
  • 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about...
    裘马轻狂大帅阅读 756评论 0 5
  • 目录 - 1.vue-router 动态路由匹配 - 2.router-link组件及其属性 - 3.vue-ro...
    我跟你蒋阅读 1,138评论 0 7