526互联

vue Router的原理及传参方法

发布时间 2023-06-12 13:17:48作者: 中亿丰数字科技

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以非常方便地实现单页面应用程序（SPA）的路由功能。Vue Router 的原理主要是通过监听 URL 的变化，根据不同的 URL 显示不同的组件，从而实现页面的切换和跳转。
具体来说，Vue Router 的原理包括以下几个方面：

  1. 路由配置：在 Vue Router 中，我们需要先定义路由配置，即将 URL 和组件进行映射。路由配置可以通过一个数组或者一个对象来定义，其中每个路由都包含一个路径和一个组件。
    2.路由匹配：当 URL 发生变化时，Vue Router 会根据路由配置进行路由匹配，找到与当前 URL 匹配的路由记录。路由匹配的过程是从上到下依次匹配，直到找到第一个匹配的路由记录。
  2. 路由跳转：当路由匹配成功后，Vue Router 会根据路由记录中定义的组件来渲染页面。同时，Vue Router 还提供了一些方法和钩子函数，可以在路由跳转前、跳转后或者路由变化时进行一些操作，比如验证用户权限、获取数据等。
  3. 路由模式：Vue Router 支持两种路由模式，即 hash 模式和 history 模式。在 hash 模式下，URL 中会带有 # 符号，而在 history 模式下，URL 不会带有 # 符号。两种模式的原理略有不同，但都可以实现单页面应用程序的路由功能。

总的来说，Vue Router 的原理比较简单，主要是通过路由配置、路由匹配和路由跳转来实现页面的切换和跳转。同时，Vue Router 还提供了一些高级功能，比如路由懒加载、路由嵌套等，可以帮助我们更好地管理和组织应用程序的路由。

路由传参

  1. Query路由传参

编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象

const toDetail = (item: Item) => {
    router.push({
        path: '/reg',
        query: item
    })
}

接受参数
使用 useRoute 的 query

import { useRoute } from 'vue-router';
const route = useRoute()

 <div>品牌：{{ route.query?.name }}</div>
 <div>价格：{{ route.query?.price }}</div>
 <div>ID：{{ route.query?.id }}</div>

2.Params路由传参
编程式导航 使用router push 或者 replace 的时候 改为对象形式并且只能使用name，path无效，然后传入params

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: item
    })
}

接受参数
使用 useRoute 的 params

import { useRoute } from 'vue-router';
const route = useRoute()

<div>品牌：{{ route.params?.name }}</div>
<div>价格：{{ route.params?.price }}</div>
<div>ID：{{ route.params?.id }}</div>