Vue3路由

路由简介：

路由：可以根据特定的规则将数据包或请求从源地址传输到目标地址

在前端或者vue3项目中路由主要用于构建单页面应用程序（SPA）

路由器（Router）：路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。

请着重注意，路由器（Router）与路由（Route）的区别。路由器是用来管理路由的，你也可以理解为路由的集合。如果将一个一个的路由比作学生，那么路由器就是老师，负责管理所有的路由。在vue3项目中，路由是由路径和对应的组件构成的。我们通过切换不用的路径来展示不同的组件效果，路由器就是负责管理这些路径和路由对应的一些属性，来控制和管理路由的。

使用之前也需要导入一下对应的依赖：

npm install vue-router@4

Vue3路由官网：

介绍 | Vue Router (vuejs.org)

配置文件案例：

import Index from "../pages/Index.vue";
import Team from "../pages/Team.vue";
import UserPage from "../pages/UserPage.vue";
import Search from "../pages/Search.vue";
import UserEditPage from "../pages/UserEditPage.vue";
import SearchResultPage from "../pages/SearchResultPage.vue";
import UserLoginPage from "../pages/UserLoginPage.vue";
import TeamAddPage from "../pages/TeamAddPage.vue";
import TeamUpdatePage from "../pages/TeamUpdatePage.vue";
import UserTeamJoinPage from "../pages/UserTeamJoinPage.vue";
import UserTeamCreatePage from "../pages/UserTeamCreatePage.vue";
import UserUpdatePage from "../pages/UserUpdatePage.vue";

const routes = [
        { path: '/', component: Index },
        { path: '/team', title: '找队伍', component: Team },
        { path: '/team/add', title: '创建队伍', component: TeamAddPage },
        { path: '/team/update', title: '更新队伍', component: TeamUpdatePage },
        { path: '/user', title: '个人信息', component: UserPage },
        { path: '/search', title: '找伙伴', component: Search },
        { path: '/user/list', title: '用户列表', component: SearchResultPage },
        { path: '/user/edit', title: '编辑信息', component: UserEditPage },
        { path: '/user/login', title: '登录', component: UserLoginPage },
        { path: '/user/update', title: '更新信息', component: UserUpdatePage },
        { path: '/user/team/join', title: '加入队伍', component: UserTeamJoinPage },
        { path: '/user/team/create', title: '创建队伍', component: UserTeamCreatePage },
]

export default routes;

这个很好理解，就是当你访问一个固定路劲的时候，就会跳转到特定的页面。

我觉得就这么理解就行，这也就是单页面应用。

to的两种写法

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

<!-- 第三种：to的对象写法 -->
<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>

嵌套路由：

配置路由规则，使用children配置项：children配置项不需要加"/"

 

const router = createRouter({
  history:createWebHistory(),
	routes:[
		{
			name:'zhuye',
			path:'/home',
			component:Home
		},
		{
			name:'xinwen',
			path:'/news',
			component:News,
			children:[
				{
					name:'xiang',
					path:'detail',
					component:Detail
				}
			]
		},
		{
			name:'guanyu',
			path:'/about',
			component:About
		}
	]
})
export default router

路由传参：

query参数：

1：传递参数：

<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">
	跳转
</router-link>
				
<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink 
  :to="{
    //name:'xiang', //用name也可以跳转
    path:'/news/detail',
    query:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  }"
>
  {{news.title}}
</RouterLink>

2：接收参数：

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)

params参数：

1：传递参数：

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink 
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

2：接受参数：

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

注意点：

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位。路由的props配置：

{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,

  // props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
  // props:{a:1,b:2,c:3}, 

  // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
  // props:true
  
  // props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
  props(route){
    return route.query
  }
}

replace属性和push属性

replace就是替换当前页面

push就是有个压栈的感觉，按回退就会退到之前的页面

编程导航：

所谓编程导航就是导航到不同的位置，并且不需要用<RouterLink>这个标签

这里的编程导航的实例都是router，router 指代路由器实例。在组件内部

路由组件的两个重要的属性：$route和$router变成了两个hooks,hooks在vue3的基础语法中有提到，类似一个

interface newStr{
  id:string;
  title:string;
  content:string;
}
function ShowNew (news:newStr){
  router.push({
    path:'/news/detail',
    query:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  })
}

工具类。

import {useRoute,useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)