vue-router编程式的导航 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


vue-router编程式的导航

2019-10-20 释然 前端及开发文章及欣赏


什么是编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location, onComplete?, onAbort?)
注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

HTML代码

<p @click="$router.push('/test/emitView')">跳转1</p>
<p @click="$router.push({path: '/test/propsView'})">path: '/test/propsView'</p>
<p @click="test">带参数的跳转</p>
<p @click="test1">提供了path,params会被忽略</p>
<p @click="$router.push({path: `/test/propsView/${userId}`})">
    url变为/test/propsView/123
</p>
<p @click="$router.push({path: '/test/propsView', query: {plan: 'private'}})">
    带参数的url变为/test/propsView?plan=private
</p>
Script中代码

test () {
    this.$router.push({
        name: 'routerView',
        params: {userId: this.userId, test: 333},
    })
    console.log(this.$route)
    console.log(this.$route.params)
},
test1 () {
    this.$router.push({ // 如果提供了 path,params 会被忽略
        path: 'routerView',
        params: {userId: this.userId, test: 333},
    })
    console.log(this.$route)
    console.log(this.$route.params)
},
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
 
// 后退一步记录,等同于 history.back()
router.go(-1)
 
// 如果 history 记录不够用,则无反应
router.go(-100)
router.go(100)
router.back()
在浏览器记录中后退一步

router.forward()
在浏览器记录中前进一步


蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: vue-router编程式的导航 « 经典设计书《简约至上》的精华版读书笔记 | H5之外部浏览器唤起微信分享»


蓝蓝 http://www.bjhbys.com

  1. 帝皇彩票官网2019年10月(53)
  2. 2019年9月(48)
  3. 2019年8月(63)
  4. 2019年7月(59)
  5. 2019年6月(59)
  6. 2019年5月(31)
  7. 2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 2018年12月(41)
  12. 2018年11月(40)
  13. 2018年10月(29)
  14. 2018年9月(40)
  15. 2018年8月(87)
  16. 2018年7月(107)
  17. 2018年6月(86)
  18. 帝皇彩票官网2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 帝皇彩票官网2017年5月(27)
  25. 2017年4月(51)
  26. 2017年3月(70)
  27. 2017年2月(65)
  28. 帝皇彩票官网2017年1月(69)
  29. 2016年12月(55)
  30. 2016年11月(111)
  31. 2016年10月(92)
  32. 2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 2016年1月(30)
  39. 2015年12月(33)
  40. 帝皇彩票官网2015年11月(35)
  41. 2015年10月(46)
  42. 2015年9月(43)
  43. 2015年8月(40)
  44. 2015年7月(33)
  45. 帝皇彩票官网2015年6月(46)
  46. 2015年5月(58)
  47. 帝皇彩票官网2015年4月(70)
  48. 2015年3月(55)
  49. 2015年2月(17)
  50. 2015年1月(33)
  51. 2014年12月(21)
  52. 2014年11月(84)
  53. 2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 2014年5月(99)
  59. 2014年4月(88)
  60. 2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 帝皇彩票官网2013年12月(106)
  64. 2013年11月(112)
  65. 2013年10月(61)
  66. 2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 2013年5月(48)
  70. 2013年4月(39)
  71. 2013年3月(8)
  72. 2013年2月(20)
  73. 2013年1月(31)
  74. 2012年12月(33)
  75. 帝皇彩票官网2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 2011年12月(35)
  85. 2011年11月(32)
  86. 2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
状元彩票官网 状元彩票官网 状元彩票开奖 千禧彩票注册 迪士尼彩乐园娱乐 安徽快3计划 吉利彩票开奖 状元彩票计划 山东11选5走势 帝皇彩票官网