Vue中路由的跳转

Vue中跳转页面的方式

1、<router-link>组件

　　例子：

// 单纯的跳转页面
<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():返回上一级导航