Vue-Router编程式导航

页面导航的两种方式

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

例如：

普通页面<a></a>链接

vue中的<router-link></router-link>

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

例如：普通页面当中的location.href

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

//跳转到指定的hash地址

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

//页面的前进后退刷新

this.$router.go(n)

 const User={

          template:'
          <div>
          	<button @click="goRegister">跳转到注册页面</button>
          
          </div>
          ',
          methods:{
          	goRegister(){
          		this.$router.push("./register")
          	},
          }
}

 const Register={

          template:'
              <div>
          	    <button @click="goBack">返回上一页</button>   
              </div>
          ',
          methods:{
          	goBack(){
          		this.$router.go(-1)
          	},
          }

编程式导航参数规则

router.push()方法的参数规则

1：字符串

router.push('./home')

2：对象

简单对象

router.push(path:'./home')

3.命名的路由（传递参数）

router.push(path:'./home',params:{id:123})

4带查询参数，变成/register?uname=花花

router.push(path:'./registerquery:{unmae:"花花"})