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、文章标题等。
相关推荐
宁雨桥10 分钟前
前端登录加密实战:从原理到落地,守护用户密码安全
前端·安全·状态模式
椒盐螺丝钉23 分钟前
TypeScript类型兼容性
运维·前端·typescript
_JinHao27 分钟前
Cesium Viewer对象详解——Cesium基础笔记(快速入门)
前端·javascript·笔记·3d·webgl
正义的大古30 分钟前
OpenLayers地图交互 -- 章节十三:拖拽旋转交互详解
javascript·vue.js·openlayers
r0ad1 小时前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖1 小时前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling5551 小时前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route1 小时前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒1 小时前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏2 小时前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js