Vue路由的跳转

概述

路由的跳转方式有：

1.通过标签：`<router-link to='/login'></router-link>`

2.通过js控制跳转`this.$router.push({path:'/login'})`

区别：

this.$router.push()  跳转到指定的url，会向history插入新记录

this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

this.$router.go(-1) 常用来做返回，读history里面的记录后退一个

vue-router中的对象：

$route  路由信息对象,只读对象

$router 路由操作对象,只写对象

代码

var Login={

           template:`

              <div>我是登录页面</div>

           `,

       }

       var Register={

           template:`

              <div>我是注册页面</div>

           `,

       }

       var Buy={

           template:`

              <div>我要买东西</div>

           `,

       }

       //安装路由插件

       Vue.use(VueRouter);

       //创建路由对象

       var router= new VueRouter({

           //配置路由对象

           routes:[

              {path:'/login',name:'login',component:Login},

               {path:'/register',name:'register',component:Register},

              {path:'/buy',name:'buy',component:Buy},

           ]

       })

       new Vue({

           el:'#app',

           router,

           template:`

              <div>

                  <router-link to='/login'>去登录</router-link>

                  |

                  <router-link to='/register'>去注册</router-link>

                  <div>

                     <button @click='goregister'>我要去买东西</button>

                     <button @click='back'>返回上一页</button>

                  </div>

                  <router-view></router-view>

              </div>

           `,

           data(){

              return {}

           },

           methods:{

              goregister(){

                  //push跟replace是达到同样效果，但是replace是不会向history插入记录

                  // this.$router.push({path:'/register'})

                  this.$router.replace({path:'/buy'})

                 

              },

              back(){

                  this.$router.go(-1)

              }

           }

       })

运行效果

 

 

使用this.$router.replace

点击登录 注册 后

点击我要去买东西，此时不会把注册的记录保存下来，再点返回上一页，是登录而不是注册