路由跳转

1.声明式路由跳转

（不带参数）

通过router-link标签进行跳转，使用name或者path都可以，在dom结构中会被渲染成a标签
注意：router-link中链接如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。

     <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}">

（带参数）

注意：
params传参数 (类似post)
路由配置 path: "/home/:id"
不配置path，路由跳转可请求，刷新页面传递的参数会丢失，
配置path，刷新也买你id会被保留

<router-link :to="{name:'home', params: {id:1}}">

<router-link :to="{name:'home', query: {id:1}}">

获取路由跳转传递的参数：
html 通过 $route.params.id， script 通过this.$route.params.id

2.编程式路由跳转

1.字符串形式

router.push('home')

2.对象形式

router.push({ path: 'home' })
router.push({ name: 'user'})

3.函数内调用
（不带参数）

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

（query传参）

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

html 取参 $route.query.id
script 取参 this.$route.query.id
（params传参）
只可以使用name

this.$router.push({name:'home',params: {id:'1'}})

html 取参$route.params.id， script 取参this.$route.params.id

3.`query`和`params`的区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

vue路由跳转以及路由传参接收相关推荐

React路由跳转时通过传参进行动态渲染的方法
最近在react项目中,需要根据点击元素的不同,而切换同一个路由地址下的一个Tab选项卡的不同区域中,我采用的是通过在路由跳转时候顺带传值的方法,通过值的不同而切换到选项卡的不同区域中. 首先是pag ...
微信小程序页面跳转，url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...
ajax 与route的区别,浅析vue-router jquery和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数传参: this.$router.push({ path ...
uni-app 微信小程序分享功能传参接收与调试
uni-app 微信小程序功能传参接收与调试当使用微信小程序进行分享好友功能时,怎样能够联调,查看是否接收到参数,并在被分享人点进来的时候逻辑处理是否正确. 1.分享功能实现分享给朋友 ...
vue——路由之路由跳转、路由传参、路由嵌套、路由模式
相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...
vue 跳转外部链接传参整个路由，获取路由上的参数
一.传参路由要先编码encodeURIComponent 二.传到下个页面要先解码decodeURIComponent 三.获取路由上的参数 getUrlKey(keyname, url) {retu ...
微信小程序的路由跳转、路由传参
1.路由跳转声明式:就是指标签实现的跳转方式: 编程式:就是指js事件实现的跳转方式: 原生js跳转:(2种) 声明式:a标签属性 href 编程式:location ...
vue路由route的restful风格传参
前面讲了vue的ref传值和bus总线传值CSDN,父组件给子组件传值CSDN,子组件给父组件传值CSDN四种传值方式,以及路由的两种跳转方式,本篇文章再介绍一下vue的路由restful风格(表述性 ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...

vue路由跳转以及路由传参接收

路由跳转

1.声明式路由跳转

2.编程式路由跳转

3.`query`和`params`的区别

vue路由跳转以及路由传参接收相关推荐

最新文章

热门文章

vue路由跳转以及路由传参接收

路由跳转

1.声明式路由跳转

2.编程式路由跳转

3.query和params的区别

vue路由跳转以及路由传参接收相关推荐

最新文章

热门文章

3.`query`和`params`的区别