实现路由跳转的方式

声明式路由导航

直接写在html中，结构简单使用方便，但是只能放在<router-link>标签中使用，<router-link>标签会将路由转成<a>标签，通过点击跳转路由，因此局限性也非常大

<template>
	<div>
		<h1>{{$route.query.msg}}</h1>
		<br>
		用户名：<input id="uname" name="username" value="ps"/>
		密码 ：<input id="pwd" name="password" value="123"/>
		
		<!-- 声明式路由导航 start -->
		<router-link :to="{name:'home', query: {msg:'欢迎'}}">登录</router-link>			<!--  query传参 路由不需增加额外配置，举例 path: "/login" -->
		<!-- <router-link :to="{name:'home', params: {msg:'登录'}}">login</router-link> -->	<!-- params传参 路由需增加 “:参数名” 配置，举例 path: "/login/:msg" -->
		<!-- 声明式路由导航 end -->
		
	</div>
</template>

<script>
	export default {
		name: "Login",
	}
</script>

<style>
</style>

编程式路由导航

需要写在js中，结构也不算复杂，优势在于非常灵活，不受固定标签限制，可以在任意情景下转跳路由

在Vue里，可以通过vm的$router对象来进行路由的管理

这里区分一下 route 和 route和route和router，顾名思义，$route是当前路由组件激活的对象，里面是当前路由组件的一些信息，比如params，query，path等

而router是 路 由 器 ， 里 面 保 存 的 是 全 部 的 路 由 已 经 提 供 了 一 些 管 理 路 由 的 方 法 ， 我 们 这 里 使 用 的 主 要 是 以 下 几 种 方 法 ：

• $router.push(url)
• $router.replace(url)
• $router.go()
• $router.back()

push方法就是将当前路由压栈后跳转到新的路由，通过回退按钮是回退到栈顶。

replace方法是直接替换当前路由到新路由，并不会保存历史记录到回退按钮上。

go方法就是指定到历史记录的哪里，例如-1就是返回到上一个历史记录，1就可以表示为前进一个。

back方法就直接是返回到上一个历史记录，通常用作返回按钮。

<template>
	<div>
		<h1>{{$route.query.msg}}</h1>
		<br>
		用户名：<input id="uname" name="username" value="ps"/>
		密码 ：<input id="pwd" name="password" value="123"/>
		
		<!-- 编程式路由导航 start -->
		<button @click="toHomePage('好耶')">登录</button>
		<!-- 编程式路由导航 end -->
		
	</div>
</template>

<script>
	export default {
		name: "Login",
		methods: {
			
			// 编程式路由导航 start ----------------------------------------
			toHomePage(msg) {
				
				// push 方法，路由历史记录会被全部保留
				this.$router.push({name:'home', query:{msg:msg}})  // query传参 路由不需增加额外配置，举例 path: "/login"
				// this.$router.push({name:'home', params:{msg:msg}}) // params传参 路由需增加 “:参数名” 配置，举例 path: "/login/:msg"
				
				// replace 方法，本次路由记录覆盖上一次的路由记录
				// this.$router.replace({name:'home', query:{msg:msg}})  // query传参 路由不需增加额外配置，举例 path: "/login"
				// this.$router.replace({name:'home', params:{msg:msg}}) // params传参 路由需增加 “:参数名” 配置，举例 path: "/login/:msg"
				
			}
			// 编程式路由导航 end ------------------------------------------
			
		}
	}
</script>

<style>
</style>