$route和$router的区别

简介: $route和$router的区别

$route是指在Vue.js中定义的路由的对象,它包含了路由的路径、名称、组件等信息。我们可以通过$route来访问当前路由的信息。

$router是指Vue.js中的路由器对象,它负责管理所有的路由和导航功能。通过$router对象,我们可以实现路由的跳转、导航守卫等功能。

假设我们在Vue.js中定义了以下路由:

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

在组件中,我们可以通过$route来访问当前路由的信息,比如获取当前路由的路径和名称:

export default {
  mounted() {
    console.log(this.$route.path)  // 打印当前路由的路径
    console.log(this.$route.name)  // 打印当前路由的名称
  }
}

而如果我们想进行路由的跳转,就需要使用$router对象,比如在点击按钮时跳转到指定的路由:

export default {
  methods: {
    goToAbout() {
      this.$router.push({ path: '/about' })  // 跳转到/about路由
    }
  }
}
目录
相关文章
|
1月前
|
算法 网络架构
router和route的区别?
router和route的区别?
15 0
|
1月前
|
前端开发 网络架构
浅谈Router和Route
浅谈Router和Route
14 0
|
4月前
|
JavaScript Go 网络架构
route和router的区别
route和router的区别
55 0
|
9月前
|
网络架构
$router和$route的区别?
$ router是用来操作路由的,$ route是用来获取路由信息的。
|
5月前
|
网络架构
Transit Router
阿里云的转发路由器 Transit Router(简称“TR”)是一款功能强大的网络转发产品,它可以为用户提供灵活、可靠、大规模的企业级互联网络
|
6月前
|
前端开发 JavaScript 网络架构
Route和Router的区别
Route和Router的区别
24 0
|
7月前
|
JavaScript 前端开发 网络架构
route/router区别/参数
route/router区别/参数
32 0
|
8月前
|
存储 JavaScript 调度
Router和Route
Router和Route
29 0
|
9月前
|
JavaScript
$router和$route区别
$router和$route区别
|
10月前
|
JavaScript
Vue路由router以及route与router的区别
Vue路由router以及route与router的区别