Vue 两种导航方式

目录

一、声明式导航

二、编程式导航

三、两句话总结


一、声明式导航

  1. 传参跳转:
html 复制代码
<router-link :to="/user?name=CHEEMS&id=114514">
  Query传参
</router-link>

<router-link :to="/user?参数名1=参数值1&参数名2=参数值2&...">
  Query传参
</router-link>
  1. 接参:
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"
  }
}

二、编程式导航

  1. 传参跳转:
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 } // 参数名后面加个?表示参数可选
  ]
  1. 接参:
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、文章标题等。
相关推荐
拳打南山敬老院8 分钟前
从零构建一个插件系统(四)插件的缓存
javascript·架构
Sobeit8 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc14 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮21 分钟前
dify二开示例
前端·后端·python
该用户已不存在23 分钟前
Node.js 真的取代了PHP吗?
前端·后端·node.js
ze_juejin33 分钟前
JavaScript 的事件循环(Event Loop)机制
前端
前端缘梦36 分钟前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七42 分钟前
中型企业如何用 RUM 技术破解地理分布式用户体验难题?从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟1 小时前
《从点击到共鸣:论坛前端如何用交互细节编织用户体验》
前端·ux
樱花开了几轉1 小时前
React中的合成事件解释和理解
前端·javascript·react.js