VUE路由的跳转

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/icebns/article/details/102605255

路由的跳转方式：

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 路由操作对象,只写对象

        //安装路由插件

        Vue.use(VueRouter);

        //创建路由对象

        var router= new VueRouter({

            //配置路由对象

            routes:[

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

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

            ]

        })

通过标签：

            template:`

                <div>

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

                    |

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

                    <div>

                        <button @click='goregister'>注册2号</button>

                    </div>

                    <router-view></router-view>

                </div>

            `

通过JS：

methods:{

   goregister(){

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

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

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

   } 

}