路由——跳转方式

1.this.$router.push()

描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。

2.this.$router.replace()

描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

4.router-link

<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

query传参

• query可以通过name或path来引入路由

  var router = new VueRouter({
      routes: [ 
        { name:'register',path: '/register', component: register } 
      ]
    })

 <router-link to="/login?id=10&name=zs">登录</router-link>
 <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link> 
 <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
 this.$router.push('/login?id=10&name=zs')
 this.$router.push({path:'/register',query:{id:5,name:'lili'}})
 this.$router.push({name:'register',query:{id:5,name:'lili'}})

params传参

• params只能通过name来引入路由，path会undefined

 <router-link to="/login/12/ls">登录</router-link>
 <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
 this.$router.push('/login/12/ls')
 this.$router.push({name:'register',params:{id:10,name:'lili'}})

• 路由中定义的name不能重复，否则路由会被覆盖，上个路由将会是404