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、文章标题等。
相关推荐
gnip10 分钟前
js上下文
前端·javascript
中草药z10 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)24 分钟前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休34 分钟前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel40 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组44 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5811 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~1 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html