Vue声明式路由导航和编程式路由导航的优缺点及实现方法

---

前言

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

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

实际应用时可根据自身喜好决定使用哪种路由

---

路由实现

1.目标

实现一个简单的登录页到主页的转跳

2.前置条件

<1>安装vue-router插件

可以参考这篇文章

https://blog.youkuaiyun.com/weixin_43721000/article/details/125017785

<2>写个用于转跳的组件页

ps：普通组件放在 src/components 中，路由组件一般放在 src/pages 或者 src/views 下

简单写个主页，用于登录转跳测试
/src/pages/Home.vue

<template>
	<h1>{{$route.query.msg}}</h1>
</template>

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

<style>
</style>

<3>写路由文件

src 下创建 router/index.js 路由文件，内容如下

import VueRouter from 'vue-router'
import Login from '../pages/Login'   // 引入组件
import Home from '../pages/Home'   // 引入组件

// 创建路由器
const router = new VueRouter({
	routes:[
		{
			// 访问根路径时，重定向到login组件
			path: '/', 
			redirect: 'login'
		},
		{
			name:'login', 	  // 路由名
			path:'/login',	  // 路由路径
			component:Login   // 对应组件名
		},
		{
			name:'home', 	  // 路由名
			path:'/home',	  // 路由路径
			component:Home   // 对应组件名
			// // 如果有嵌套子路由，需按照下面的方式写，注意子路由path前面没有斜杠
			// // 对应页面的template标签中不要直接放文本，得有子标签，否则可能会导致项目启动时卡住
			// children: [
            //     {
            //         name:'upload_file', 	  	// 路由名
            //         path:'upload_file',	  		// 路由路径
            //         component:UploadFile   		// 对应组件名，子路由前面没有斜杠
            //     },
            // ],
		},
	]
})

export default router;

<4>写路由锚点

路由组件渲染位置

<template>
  <div id="app">
	
	<!-- 路由组件显示锚点 start -->  
	<router-view></router-view>
	<!-- 路由组件显示锚点 end -->  
	
  </div>
</template>

<script>
</script>

<style>
</style>

3.声明式路由导航

<1>实现

src/pages/Login.vue

<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>

<2>测试

1. 启动 vue 访问 http://127.0.0.1:端口/
   页面自动转跳到 http://127.0.0.1:端口/#/login
   

2. 点击登录
   

4.编程式路由导航

<1>实现

src/pages/Login.vue

<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>

<2>测试

1. 启动 vue 访问 http://127.0.0.1:端口/
   页面自动转跳到 http://127.0.0.1:端口/#/login
   

2. 点击登录
   

---