Vue学习笔记十三：路由的跳转

Vue版本：2.5.21
Vue-router版本：3.1.6
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由的跳转</title>
</head>

<body>
    <!-- 
        路由的跳转
           路由的跳转方式有：
               *通过标签：<router-link to='/login'></router-link>
               *通过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路由操作对象，只写对象
     -->
    <div id="app"></div>
    <script src="../vue.js"></script>
    <!-- 引入路由插件 -->
    <script src="../vue-router.js"></script>
    <script>
        var Register = {
            template: `<div>我是注册页面</div>`
        }
        var login = {
            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);
                }
            },
        });
    </script>
</body>

</html>
效果

在这里插入图片描述
来源：CSDN
作者：INAGIML
链接：https://blog.csdn.net/qq_45283247/article/details/104739394
标签
vue
路由
vue-router
vue路由