Vue路由传参的两种方式
在vue中,参数传递共有2种:
http://localhost:8080/demo?cid=c001
http://localhost:8080/demo2/c001
查询参数
- 确定访问路径
<!-- 带查询参数,下面的结果为 /demo?cid=c001 --> <router-link to="/demo?cid=c001">Demo</router-link> | <router-link :to="{ path: '/demo', query: { cid: 'c001' }}">demo</router-link>
- 编写路由
{ path: '/demo', name: 'demo', component: Demo },
- 编写页面,并获得参数
<template> <div> </div> </template> <script> export default { mounted() { // 获得查询参数 console.info( this.$route.query.cid ) }, } </script> <style> </style>
路径参数
- 编写访问路径
<router-link :to="{ name: 'demoName2', params: { uid: 123 }}">Demo2</router-link> | <router-link to="/demo2/123">Demo2</router-link> |
- 确定访问路径
{ path: '/demo2/:uid', name: 'demoName2', component: Demo2 }
- 编写路由
{ path: '/demo2/:uid', name: 'demoName2', component: Demo2 }
- 编写页面,并获得参数
<template> <div> </div> </template> <script> export default { mounted() { // 获得路径参数 console.info( this.$route.params.uid ) }, } </script> <style> </style>
路由总结
- 在任何组件内通过 this.$router 访问路由器
- 在任何组件内通过 this.$route 访问当前路由:
this.$route相关操作 | 描述 | 实例 | |
---|---|---|---|
this.$route.params | 获得路径参数 | 模式 | /user/:uid |
匹配路径 | /user/123 | ||
this.$route.params.uid | 123 | ||
this.$route.query | 获得请求参数 | /user?id=123 |
相关文章
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- Vue(3)webstorm代码格式规范设置与vue模板配置
- vue中通过路由跳转的三种方式
- html使用vue axios,使用 Vue和axios
- todomvc项目_reactive vue
- vue消息提示组件封装
- 「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表,得学学了,必须要会的基本操作了
- vue的双向绑定原理_vue2双向绑定原理
- vue 重新加载页面_页面重新加载
- vue.js和jquery的区别_人和人类的区别是什么
- vue-pdf使用demo
- vue路由懒加载的实现方式_vue路由懒加载实现原理
- vue路由懒加载的实现方式_vue-router路由模式
- 前端一面常见vue面试题汇总_2023-02-27
- Vue之路由(Router)
- Vue值Router(路由)2
- Vue进阶课堂之《从HTML到Pug》
- Vue监听路由中传参的变化-关于watch的使用方式
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)