vue router总结 $router和$route及router与 router与route区别

下面来详细讲解一下 "vue router 总结 $router和$route及router与 router与route区别"

1. 什么是vue-router?

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，我们可以用 Vue.js 生成的组件结构快速构建 SPA，并且非常方便地管理应用程序的路由。Vue Router 的最大特点是：注重每一条路由的生命周期，同时也是 Vue.js 应用中最为重要的核心插件之一。

2. $router和$route的区别

• $router：路由实例，提供了针对路由的全局 API，如通过代码控制路由跳转、监听路由跳转。
• $route：当前路由对应的带参数的信息对象，如当前页面的路径、参数、query 等。

3. router与 route 的区别

• router：Vue Router 的实例，管理者路由跳转和监听，是一个全局注入的对象。
• route：当前路由的信息对象，里面包含了当前路由的参数、query、name、path 等信息。

4. 注意点

• 如果需要访问 $router 和 $route，需要在组件中先引入它们。

  // 引入
  import { $router, $route } from 'vue-router'

• 如果需要跳转到某个页面，可以使用 $router 对象。例如跳转到名字为 home 的路由页面可以这么写：

  this.$router.push('/home')

• 如果需要获取当前路由的参数信息，可以使用 $route 参数对象。例如获取 id 参数，可以这么写：

  let id = this.$route.params.id

5. 示例说明

示例一

当我们要访问路由对象的时候，我们可以给全局方法加入一个路由钩子，在路由钩子中访问路由对象。如下所示：

  router.beforeEach((to, from, next) => {
    console.log(to) // 访问到的路由对象
    next()
  })

示例二

如果我们想要在当前页面的某个方法中访问当前路由的 $route 参数对象，我们可以这样做：

<template>
  <div>
    当前路由 ID：{{ id }}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: ''
      }
    },
    mounted() {
      this.id = this.$route.params.id
    }
  }
</script>

以上就是关于“vue-router总结 $router和$route及router与router与route区别”的完整攻略，希望能对你有所帮助。