Vue-router之路由参数传递

params

// client/config/routes.js
export default [{path: '/app/:id',}
]
复制代码

// client/app.vue
<template><div id="app"><router-link to="/app/123">app</router-link></div>
</template>
复制代码

点击 app 链接，跳转 todo 页面，本地url 路径 localhost:8000/app/123

通过 $route 可以拿到路由信息

// client/app.vue
export default {mounted () {console.log(this.$route)}
}
复制代码

// 控制台
{name: "app", meta: {…}, path: "/app/123", hash: "", query: {…}, …}
fullPath:"/app/123"
hash:""
matched:[{…}]
meta:{title: "this is app", description: "xxx"}
name:"app"
params:{id: "123"}
path:"/app/123"
query:{}
__proto__:Object
复制代码

props 传 params

通过这种方式，不需要 this.$route 的写法，它会和 vue-router 有一定的耦合，如果其升级，用法可能会变；如果组件使用了 this.$router 的写法，就不能作为单纯的组件拿到其他地方用，只能作为 route 配置中的 component 去用。

通过 props 的方式，实现了解耦，可以在其他地方使用组件，只需要传 props 即可。

// client/config/routes.js
export default [{path: '/app/:id', // 把 :id 作为 props 传到 Todo 中props: true, // 通过 props 来传 paramscomponent: Todo,}
]
复制代码

export default {props: ['id'],mounted () {console.log(this.id) // 控制台 123}
}
复制代码

props 指定值

// client/config/routes.js
export default [{path: '/app/:id', props: {id: '456' },component: Todo,}
]
复制代码

props 函数

通过 query 指定 id

// client/config/routes.js
export default [{path: '/app/:id', props: (route) => ({ id: route.query.b }) // 通过 query 指定 idcomponent: Todo,}
]
复制代码

query

在路径上直接添加，http://localhost:8000/app/123?a=123&b=456

通过 $route 拿到 query

query: {a: "123", b: "456"}
复制代码

转载于:https://juejin.im/post/5b95cef2f265da0acd209d3a

Vue-router之路由参数传递相关推荐

Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
Vue Router 命名路由、（嵌套）命名视图
命名路由在Vue Router中除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
vue——router更改路由地址，但是页面不能跳转
在做电商项目时,筛选标签时,需要路由发生变化,但是当前的页面商品列表还需要局部刷新. 如果更改路由后,页面跳转,则是全局刷新,局部刷新才能够满足用户需求. 则此时要做的就是:更改路由地址,但是页面不能 ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...