Erlo

vue中$router和$route的简单介绍(附示例)

时间:2018-10-12 17:32   阅读:10次   来源:php中文网页面报错

本篇文章给大家带来的内容是关于vue中$router和$route的简单介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

路由基本概念

route,它是一条路由。

{ path: '/home', component: Home }

routes,是一组路由。

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

router可以理解为一个容器,或者说一种机制,它管理了一组route。简单来说,route只是进行了URL和函数的映射,而在当接收到一个URL之后,去路由映射表中查找相应的函数,这个过程是由router来处理的。

    const router = new VueRouter({
          routes // routes: routes 的简写
    })

VUE中

$route为当前router跳转对象里面可以获取name、path、query、params等。

$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法,返回上一个history使用$router.go方法。跟上面说的一样,这里的$router就管理路由的跳转,英文里er结尾的都表示一种人,这里你可以把这个想象中一个管理者,他来控制路由去哪里(push、go),这样就比较容易记。

路由跳转

1 可以手写完整的path:

this.$router.push({path:`/user/${userId}`})

这种方式需要在路由中作如下配置

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

这种接收参数的方式是this.$route.params.userId。

2 也可以用params传递:

this.$router.push({name:'Login',params:{id:'leelei'}})
//不带参数 变成 ip/login

3 也可以用query传递:

this.$router.push({path:'/login',query:{id:'leelei'})
//带查询参数变成 ip/login?id=leelei
//带斜杠/代表从根目录出发,不会嵌套之前的路径

query传参是针对path的,params传参是针对name的。。接收参数的方式都差不多。。this.$route.query.和this.$route.params.

注意这只是跳转url,跳转到这个url显示什么组件,得配置路由。router跳转和<router-link>标签跳转,规则差不多。

一些需要注意的事

使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。

如果提供了path,params将会被忽略(即如果要使用params传参,则一定要使用name),但是query不属于这种情况。如果使用完整路径和query传参,刷新页面时不会造成路由传参的参数丢失。

router.push和router.replace的区别不会向 history 添加新记录,而是替换掉当前的 history 记录,即是使用replace跳转到的网页‘后退’按钮不能点击。

以上就是vue中$router和$route的简单介绍(附示例)的详细内容,更多请关注php中文网其它相关文章!

  • 微信
  • 相关标签:前端 vue.js route
  • 本文转载于:segmentfault思否,如有侵犯,请联系删除
  • 相关文章


  • vueJS简单的点击显示与隐藏的效果【实现代码】_javascript技巧
  • Vue.js基础知识汇总_其它
  • vue.js - VueJS怎么与PHP进行数据通信
  • Vue ES6 Jade Scss Webpack Gulp 快速入门资源
  • vuejs如何v
  • Vue.js 跟踪对象新增属性
  • 来源:https://www.erlo.vip/news/15/20656.html
    下一篇:如何利用css的background绘制图形 (附代码)

    相关推荐

    提交留言

    评论留言

    还没有评论留言,赶紧来抢楼吧~~

    Erlo大厅()

    * 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2018-10-23 10:19:43Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 源码分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部