Vue 两种导航方式

heyCHEEMS2025-05-11 18:10

一、声明式导航

传参跳转：

html 复制代码

<router-link :to="/user?name=CHEEMS&id=114514">
  Query传参
</router-link>

<router-link :to="/user?参数名1=参数值1&参数名2=参数值2&...">
  Query传参
</router-link>

接参：

javascript 复制代码

export default {
  created() {
    console.log(this.$route.query); // { id: "114514", name: "CHEEMS" }
    console.log(this.$route.query.id); // "114514"
    console.log(this.$route.query.name); // "CHEEMS"
  }
}

二、编程式导航

传参跳转：

html 复制代码

<router-link :to="/user/114514/CHEEMS">
  Params传参
</router-link>

<router-link :to="/user/参数值1/参数值2/...">
  Params传参
</router-link>

需要额外配置路由：

javascript 复制代码

// 路由配置
routes: [
    { path: '/home/:id/:name', component: Home },
    { path: '/user/:id/:name?', component: User } // 参数名后面加个?表示参数可选
  ]

// 路由配置
routes: [
    { path: '/home/:参数名1/:参数名2/:...', component: Home },
    { path: '/user/:参数名1/:参数名2?/:...', component: User } // 参数名后面加个?表示参数可选
  ]

接参：

javascript 复制代码

export default {
  created() {
    console.log(this.$route.params); // { id: "114514", name: "CHEEMS" }
    console.log(this.$route.params.id); // "114514"
    console.log(this.$route.params.name); // "CHEEMS"
  }
}

三、两句话总结

Query适合传临时参数，如搜索、分页、筛选等。
Params适合传固定资源路径，如用户ID、文章标题等。