【转】Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
2023-09-27 14:20:55 时间
一、<router-link :to="...">
to里的值可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串 <router-link to="apple"> to apple</router-link> // 对象 <router-link :to="{path:'apple'}"> to apple</router-link> // 命名路由 <router-link :to="{name: 'applename'}"> to apple</router-link> //直接路由带查询参数query,地址栏变成 /apple?color=red <router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link> // 命名路由带查询参数query,地址栏变成/apple?color=red <router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link> //直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略 <router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link> // 命名路由带路由参数params,地址栏是/apple/red <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
二、router.push(...)方法
同样的规则也适用于router.push(...)方法。
// 字符串 router.push('apple') // 对象 router.push({path:'apple'}) // 命名路由 router.push({name: 'applename'}) //直接路由带查询参数query,地址栏变成 /apple?color=red router.push({path: 'apple', query: {color: 'red' }}) // 命名路由带查询参数query,地址栏变成/apple?color=red router.push({name: 'applename', query: {color: 'red' }}) //直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略 router.push({path:'applename', params:{ color: 'red' }}) // 命名路由带路由参数params,地址栏是/apple/red router.push({name:'applename', params:{ color: 'red' }})
三、注意点
1、关于带参数的路由总结如下:
无论是直接路由“path" 还是命名路由“name”,带查询参数query,地址栏会变成“/url?查询参数名:查询参数值“;
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;
2、设置路由map里的path值:
带路由参数params时,路由map里的path应该写成: path:'/apple/:color' ;
带查询参数query时,路由map里的path应该写成: path:'/apple' ;
3、获取参数方法:
在组件中: {{$route.params.color}}
在js里: this.$route.params.color
相关文章
- (尚039) Vue_router路由模式
- Vue Router 路由实现原理实现原理
- vue - webpack.dev.conf.js for HtmlWebpackPlugin
- 【Vue】通过replace取消router-link当前路由页面的历史回退记录
- vue 监听路由变化
- vue组件使用驼峰命名问题(导致没有找到组件)
- Vue获取当前点击的元素、子元素、父元素、上一个元素、下一个元素、兄弟元素
- vue重复点击路由 导致冗余导航的解决方法
- 【面试需要-Vue全家桶】一文带你看透Vue前端路由
- vue-cli 使用 webpack-bundle-analyzer
- vue axios
- 不许你不懂vue生命周期
- Vue-router路由传参的三种方式
- vue中使用watch监听路由导致多次请求问题解决方法
- vue中引入Tinymce富文本编辑器
- Vue3实践指南:Prettier代码格式化工具、格式化Vue出现单引号变双引号及分号问题、useRouter执行后undefined问题、Property 'value' does not exist on type 'HTMLElement'、error Unexpected mutation of “xxxx“ prop
- 浅析vue自定义插件的5种形式、如何使用插件、如何开发插件及开发实例
- electron-vue项目打包踩坑指南
- Vue-router路由基础总结(二)
- Vue脚手架报错:‘v-model‘ directives require no argument 解决方案
- Vue学习第33天——路由守卫(导航守卫)超详解讲解及使用场景、案例练习
- Vue学习第17天——netTick()的原理及使用
- 真正实现前后端分离架构,通过SpringBoot整合Jpa做构建后端服务器,前端通过Vue结合Element-UI和axios进行数据请求,解决了跨域请求问题、用户登录验证、百度地图根据坐标标记
- vue中对:key的理解
- Vue路由和路由器简介