页面跳转的两种方式

1、声明式导航：

含义：通过点击链接实现导航的方式，叫做声明式导航；

普通网页中的<a></a>链接或vue中的<router-link></router-link>

2、编程式导航：

含义：通过调用JavaScript形式的 API实现导航的方式，叫做编程式导航；

例如：普通网页中的location.href

2.1、vue编程式导航

常用的编程式导航API如下：

    this.$router.push('hash地址')；

    this.$router.go(n);

应用：

    <div id="app">
        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        const User = {
            template: `<div>
                          <button @click="goRegister">跳转到注册页面</button>
                       </div>`,
            methods: {
                goRegister() {
                    this.$router.push('/register')
                }
            }
        }
        const Register = {
            template: `<div>
                          <h1>Register 组件</h1>
                          <button @click="goBack">后退</button>
                       </div>`,
            methods: {
                goBack() {
                    this.$router.go(-1)
                }
            }
        }
        // 创建路由实例对象
        const router = new VueRouter({
            // 所有的路由规则
            routes: [ {
                path: '/',
                component: User
                }, {
                path: '/register',
                component: Register
            }]
        })
        
        // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            // router: router
            router
        })
    
    </script>