首页 > 其他 > 详细

Vue中路由的跳转

时间:2019-12-17 11:46:57      阅读:84      评论:0      收藏:0      [点我收藏+]

Vue中跳转页面的方式

  例子:

// 单纯的跳转页面
<router-link to="home">Home</router-link><router-link :to="{ path: ‘home‘ }">Home</router-link>
相当于
<a href="home">Home</a>
// 带参数跳转
<router-link :to="{ path: ‘register‘, query: { plan: ‘private‘ }}">Register</router-link><router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>

  备注组件中的一些属性:

  replace ----当在组件中加入replace属性时,浏览器导航不会留下历史记录,也就是在按返回箭头的时候不会返回到当前导航<router-link :to="{ path: ‘/abc‘}" replace></router-link>

  append----从导航/relative跳转到导航/relative/path<router-link :to="{ path: ‘relative/path‘}" append></router-link>

  tag ----将<router-link>标签渲染成html中的某个标签

  exact ----路有跳转进入完全匹配模式

2、this.$router

  push/replace两者的传参一样

  只是replace不会留下历史记录

  例子:

// 单纯的跳转
this.$router.push(‘/home‘)或this.$router.push({name:‘home‘})或this.$router.push({path:‘/home‘})
// 带参数的跳转
query传参
this.$router.push({name:‘home‘,query: {id:‘1‘}})
pramas传参
this.$router.push({name:‘home‘,params: {id:‘1‘}})

  go(num):num跳转的步数

  back():返回上一级导航

  

 

    

   

Vue中路由的跳转

原文:https://www.cnblogs.com/yuNotes/p/12053463.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!