Vue Router路由导航及传参方式

路由导航及传参方式

一、两种导航方式

①：声明式导航

<router-link :to="...">

②：编程式导航

router.push(...)

二、编程式导航参数有两种类型

①：字符串

// 字符串
router.push('home')

②：对象

// 对象
router.push({ path: 'home' })

三、编程式导航的params传参和query传参

①：params传参(有地址栏中显示参数和不显示参数两种)

//浏览器地址栏中显示参数和不显示参数两种情况主要就是看路由配置

//显示参数的配置
{
   name: "user",
   path: "/user:userId",
   component: Detail
}
// 命名的路由
// params相当与发送了一次post请求，请求参数会显示在浏览器地址栏中，并且刷新页面之后参数不会消失
router.push({ name: 'user', params: { userId: '123' }})

//不显示参数的配置
{
   name: "user",
   path: "/user",
   component: Detail
}
// 命名的路由
// params相当与发送了一次post请求，请求参数不会显示在浏览器地址栏中，并且刷新页面之后参数会消失
router.push({ name: 'user', params: { userId: '123' }})

//统一接收参数方式
this.$route.params.userId

②：query传参

// 带查询参数，变成 /register?plan=private
// query相当与发送了一次get请求，请求参数会显示在浏览器地址栏中
router.push({ path: 'register', query: { plan: 'private' }})

//接收参数方式
this.$route.query.plan

③：特别注意

const userId = '123'
router.push({ name: 'user', params: { userId }})     // -> /user/123
router.push({ path: `/user/${userId}` })             // -> /user/123
// 这里的 params 不生效!!
router.push({ path: '/user', params: { userId }})    // -> /user

四、声明式导航的params传参和query传参

规则与编程式导航相同，只是写法不同，简单介绍

//params传参
<router-link :to="{ name: 'user', params: { userId: '123' }}">click to news page</router-link>
//接收参数方式
this.$route.params.userId

//query传参
<router-link :to="{ path: 'register', query: { plan: 'private' }}">click to news page</router-link>
//接收参数方式
this.$route.query.plan