router传参

vue-router 的三种传递参数的方式

1. 路径参数

路径参数是指在路径中通过 :param 的形式定义的参数，在路由匹配时，会将路径参数的值传递给对应的组件。

例如：

// index.js  
import { createRouter, createWebHashHistory } from 'vue-router'

const routers =  createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Search',
      component: () => import('../views/home/search.vue')
    },
    {
        path:'//user/:id',
        name:'user',
        component:()=>import('../views/home/user.vue')
    }
]
})

export default routers

使用传参的方式：

<vue-view>
    <vue-router-link to="/user/123">User</vue-router-link> // 跳转到 user 页面  
</vue-view>

import { useRouter } from 'vue-router'
const router = useRouter()

router.push({ name: 'user', params: { id: 123 } }) // 跳转到 user 页面
router.push('/user/'+id) 
router.push(`/user/${id}`)   //反引号+花括号+变量名

在上面的路由中， :id 是一个路径参数，在匹配时，会将 :id 的值传递给 User 组件的 props 属性。

// user.vue  接收路径参数
import { useRoute } from 'vue-router'

const route = useRoute()
----------------
<template>
    <div>User {{ route.params.id }}</div>
</template>
----------------
// 或者
<template>
  <div>User {{ $route.params.id }}</div>
</template>

2. 查询参数

查询参数是指在路径后面跟着 ? 的参数，在路由匹配时，会将查询参数的值传递给对应的组件。

例如：

const routes = [
  { path: '/search', component: Search }
]

在上面的路由中， search 是一个路径，后面跟着 ? 的 query 参数，在匹配时，会将 query 的值传递给 Search 组件的 props 属性。

// 使用传参的方式
import { useRouter } from 'vue-router'
const router = useRouter()

router.push({ path: '/search', query: { q: 'vue' } }) // 跳转到 search 页面
router.push('/search?q=vue') // 跳转到 search 页面
-------------
<vue-router-link :to="{ path: '/search', query: { q: 'vue' }}">Search</vue-router-link>
//接收查询参数
import { useRoute } from 'vue-router'

const route = useRoute()

<template>
  <div>Search {{ route.query.q }}</div>
</template>

// 或者
<template>
  <div>Search {{ $route.query.q }}</div>
</template>

3. 别名参数

别名参数是指在 routes 配置中，通过 alias 属性定义的别名参数，在路由匹配时，会将别名参数的值传递给对应的组件。

例如：

const routes = [
  { path: '/posts', component: Posts, alias: '/blog/posts' }
]

在上面的路由中， /posts 是一个路径，它的别名是 /blog/posts，在匹配时，会将 /blog/posts 的值传递给 Posts 组件的 props 属性。

const Posts = {
  template: '<div>Posts {{ $route.params.category }}</div>'
}

在 Posts 组件中，通过 $route.params.category 获取别名参数的值。

注意：别名参数只能在 path 中使用，不能在 component 中使用。

总结

通过上面的介绍，我们可以总结出 vue-router 的三种传递参数的方式：

1. 路径参数：在路径中通过 :param 的形式定义的参数，在路由匹配时，会将路径参数的值传递给对应的组件。

2. 查询参数：在路径后面跟着 ? 的参数，在路由匹配时，会将查询参数的值传递给对应的组件。
   ue-router 的三种传递参数的方式：

3. 路径参数：在路径中通过 :param 的形式定义的参数，在路由匹配时，会将路径参数的值传递给对应的组件。

4. 查询参数：在路径后面跟着 ? 的参数，在路由匹配时，会将查询参数的值传递给对应的组件。

5. 别名参数：在 routes 配置中，通过 alias 属性定义的别名参数，在路由匹配时，会将别名参数的值传递给对应的组件。