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

---

前言

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

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

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

---

路由实现

1.目标

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

2.前置条件

<1>安装vue-router插件

可以参考这篇文章

https://blog.csdn.net/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   // 对应组件名
		},
	]
})

export default router;

<4>写路由锚点

路由组件渲染位置

<template>
  <div id="app">
	
	  
	<router-view>router-view>
	  
	
  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"/>
		
		
		<router-link :to="{name:'home', query: {msg:'欢迎'}}">登录router-link>			
			
		
		
	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"/>
		
		
		<button @click="toHomePage('好耶')">登录button>
		
		
	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. 点击登录
   

---