vue router的总结–$router和$route

栏目: 编程语言 · 发布时间: 6年前

内容简介：this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。声明式当你想在一个页面嵌套子路由，并且不跳转页面的时候，我觉得这个超好用啊，子页面就会渲染在router-view的地方

1 this.$router和this.$route的区别

vue router的总结–$router和$route — this.$router是VueRouter的实例方法，当导航到不同url，可以使用this.$router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。

this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。

2 路由跳转分为编程式和声明式

声明式

//路由入口
<router-link :to="...">
//视图出口
<router-view></router-view>

当你想在一个页面嵌套子路由，并且不跳转页面的时候，我觉得这个超好用啊，子页面就会渲染在router-view的地方

编程式

// 字符串
router.push('home')
 
// 对象
router.push({ path: 'home' })
 
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
 
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

但是一定要注意啊，如果你提供了path,那么params和query的配置就会被忽略的

3 path:’name’和path:’/name’的区别

如果加/则会被当作跟目录，否则当前的路径会嵌套在之前的路径中

//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
 
this.$router.push({path:'/name'})//==>path为/name

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

赛博空间的奥德赛

(荷兰)约斯·德·穆尔 (Jos de Mul) / 麦永雄 / 广西师范大学出版社 / 2007-2 / 38.00元

本书揭示了数码信息时代的电子传媒与赛博空间为人类历史的发展提供的新的可能性。本书第一部分“通向未来的高速公路”，涉及无线想象、政治技术和极权主义在赛博空间的消解等题旨；第二部分“赛博空间的想象” ，讨论空间文学探索简史、电影和文化的数码化；第三部分”可能的世界” ，关涉世界观的信息化、数码复制时代的世界、数码此在等层面；第四、五部分探讨主页时代的身份、虚拟人类学、虚拟多神论、赛博空间的进化、超人文......一起来看看《赛博空间的奥德赛》这本书的介绍吧!

码农工具