vue $route是什么 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue提供了一个名为$route的路由属性。$route是一个用于访问当前路由信息的对象。它包含了当前页面的路径、查询参数、参数等相关信息。

$route对象有以下几个常用的属性：

path：当前页面的路径，不包括域名和查询参数。
params：包含了路由参数的对象。它是一个键值对，其中键是参数名，值是参数的值。
query：一个包含查询参数的对象。它是一个键值对，其中键是查询参数的名称，值是相应的值。
fullPath：当前页面的完整路径，包括了域名、路径和查询参数。
hash：URL中的哈希值，如果没有哈希值，则为空字符串。

除了上述属性，$route对象还提供了一些方法和事件：

push()：用于跳转到一个新的路由，并将新的路由添加到浏览器的访问历史中。
replace()：与push()方法功能类似，但是不会添加新的历史记录，而是替换当前的历史记录。
go()：在浏览器的历史记录中前进或后退指定的步数。
back()：等同于go(-1)，用于后退一步。
forward()：等同于go(1)，用于前进一步。

此外，$route对象还触发了一些事件，如：

beforeRouteEnter：在路由进入前触发，可以用来做一些准备工作。
beforeRouteUpdate：在路由参数发生改变时触发，用于处理参数变化的情况。
beforeRouteLeave：在路由离开前触发，可以用来做一些清理工作。

总之，$route是Vue提供的一个非常有用的对象，用于获取和处理当前路由的相关信息。

1年前 0条评论

worktile

Worktile官方账号

vue $route是一个Vue.js框架中的全局对象，用于获取当前路由的信息。它包含了当前路由的路径、参数、查询参数、哈希值等信息，并提供了一些方法和属性来对路由进行操作和获取信息。

具体来说，$route对象包含以下属性和方法：

path：当前路由的路径，即URL中的路径部分。
params：动态路由的参数，即路径中的参数。例如，对于路径"/user/:id"，如果实际访问的URL是"/user/123"，那么params.id的值就是123。
query：查询参数，即URL中的查询字符串部分。例如，对于URL"/user?id=123&name=John"，$route.query将返回一个包含id和name属性的对象：{ id: "123", name: "John" }。
hash：哈希值，即URL中的#后面的部分。
fullPath：完整的URL路径，包括路径、查询参数和哈希值。
matched：一个包含当前路由的所有匹配的路由记录（Route Record）的数组。每个路由记录都是一个描述路由的对象，包含path、component、name等属性。
name：当前路由的名称，可以在路由配置中指定。

除了上述属性外，$route对象还提供了一些方法，用于进行路由跳转和获取路由信息，包括：

push(to)：跳转到指定的路由。参数to可以是一个字符串，表示要跳转的路径，也可以是一个描述路由的对象。例如，push("/user")将跳转到/user路径，push({ name: "user", params: { id: 123 } })会跳转到名为"user"的路由，并传递id参数。
replace(to)：跳转到指定的路由，但是不会留下浏览记录，即使用replace方式进行跳转。
go(n)：在浏览器的历史记录中向前或向后导航n个步骤。n可以是一个正数，表示向前导航，也可以是一个负数，表示向后导航。
back()：相当于go(-1)，即回退到上一个历史记录。
forward()：相当于go(1)，即前进到下一个历史记录。

通过使用$route对象，我们可以获取当前路由的信息，如路径、参数、查询参数等，也可以通过push、replace等方法进行路由跳转和导航。这使我们能够在Vue.js应用程序中实现路由功能。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue.js中，$route是一个全局变量，它代表当前路由信息。通过$route我们可以获取到当前路由的路径、参数、查询字符串等。$route对象包含了以下属性：

path：当前路由的路径，字符串类型。
params：当前路由的动态参数，对象类型。
query：当前路由的查询参数，对象类型。
fullPath：当前路由的完整路径，包括路径、参数和查询参数。
hash：当前路由的哈希值。
name：当前路由的名称。
meta：当前路由的元信息，可以在路由配置中定义。
matched：一个数组，包含当前路由匹配到的所有路由记录。

$route对象的使用可以帮助我们在组件中获取到当前路由的信息，从而根据不同的路由状态进行不同的操作。下面的示例将演示如何使用$route对象来实现页面重定向。

// 具体操作步骤如下：
1. 创建一个router.js文件并定义路由配置：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

2. 在App.vue中使用$route对象进行页面重定向：
<template>
  <div id="app">
    <h1>当前页面：{{ $route.name }}</h1>
    <button @click="redirectToHome">重定向到Home页面</button>
    <button @click="redirectToAbout">重定向到About页面</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    redirectToHome() {
      this.$router.push({ name: 'Home' })
    },
    redirectToAbout() {
      this.$router.push({ name: 'About' })
    }
  }
}
</script>
在上面的代码中，我们在App组件中使用$route对象访问当前路由的名称，并在按钮的点击事件中使用$router.push方法进行页面重定向。通过传入包含name属性的对象，我们可以指定要重定向到的路由。

总结：
$route是Vue.js提供的一个全局变量，代表当前路由信息。通过$route对象，我们可以获取到当前路由的路径、参数、查询字符串等信息。在组件中，我们可以根据$route对象实现根据不同路由状态进行不同操作的功能，例如页面重定向。

1年前 0条评论