vue router 和route 区别

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

在 Vue.js 中，Vue Router 和 route 都与路由相关，但它们代表了不同的概念。以下是它们之间的区别：

1. Vue Router

定义: Vue Router 是 Vue.js 官方的路由库，用于实现单页面应用（SPA，Single Page Application）中的路由管理。
作用: Vue Router 负责管理和控制应用中的不同视图（页面），并根据 URL 的变化动态渲染不同的组件。它提供了导航、历史记录、路由守卫、嵌套路由等功能。
使用场景: 用于配置和管理整个应用的路由行为，如定义路径、组件映射关系、导航守卫等。

工作原理: Vue Router 在后台监听 URL 的变化，并通过映射的规则来加载和渲染不同的 Vue 组件，改变应用界面。

安装: npm install vue-router

配置示例:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

通过 VueRouter 你可以配置路由路径、定义路由组件、进行路由跳转等。

2. route（Route）

定义: route 代表当前路由的信息对象，包含当前 URL 路径、参数、查询字符串等信息。
作用: 在组件中，你可以通过访问 this.$route 来获取当前路由的详细信息。

工作场景: route 主要用于获取当前路由的状态和参数，通常在 Vue 组件中使用，用来获取路径参数、查询字符串等数据。

例如，你可以在组件内通过 this.$route 来访问当前的路由对象：

// 在组件中
computed: {
  currentRoute() {
    return this.$route; // 当前路由对象
  },
  currentPath() {
    return this.$route.path; // 当前路径
  },
  currentParams() {
    return this.$route.params; // 当前路由的动态参数
  },
  currentQuery() {
    return this.$route.query; // 当前路由的查询参数
  }
}

主要区别总结

概念	Vue Router	route
定义	路由库，管理应用中的路由配置、导航等。	当前路由对象，包含当前路径、参数等信息。
作用	提供路由的配置、跳转功能、路由守卫等。	获取当前路由的状态信息（路径、参数、查询等）。
使用场景	配置应用中的路由规则，管理视图切换。	在组件中获取当前路由的状态数据。
示例	`const router = new VueRouter({ routes })`	`this.$route.path`，`this.$route.query`，`this.$route.params`

总结

Vue Router 是用于管理整个应用路由的工具，负责路由配置、导航等功能。
route 是当前路由的具体信息，通常用于在组件中访问路由的当前状态，比如路径、参数和查询等。

秒客网

vue router 和route 区别

发现宝藏

1. Vue Router

2. route（Route）

主要区别总结

总结

相关文章