web学习笔记（六十四）
目录
1.路由的声明式跳转和编程式跳转
1.1声明式跳转
1.2编程式跳转
2. 路由传参query
3.路由传参 params
4.Vue中路由传参方式以及如何接收路由参数?
5.命名路由
1.路由的声明式跳转和编程式跳转
我们在这篇文章中提到的路由都是前端路由，是用来匹配组件完成跳转的，而后端路由则是为了获取json数据的。
1.1声明式跳转
<RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink>1.2编程式跳转
可以编写js代码来完成页面的跳转
（1） router.push('/about') 等价于RouterLink，括号内可以写字符串也可以写成对象的形式。
router.push({path: '/about' })。
（2）router.go(1) 表示前进一个页面，在有历史记录的时候适合用，可以前进一个或多个页面，也括号内也可以写一个负数，表示后退几个页面。
（3）router.back() 表示后退到上一个页面，不需要传参，直接调用即可。
（4）router.replace('/about') 表示路由的重定向，这个操作不会保留历史记录，比较适合用在跳转登录页面。括号内可以写字符串也可以写成对象的形式。
<template><div><!-- --><button @click="go">过渡动画页面</button><button @click="back">后退</button></div>
</template><script setup>
import { useRouter, useRoute } from 'vue-router'
// useRouter 跳转页面 useRoute传参
const router = useRouter() //获取路由对象。调用方法跳转
const route = useRoute() //获取当前路由对象，从中获得参数// 前进
const go = () => {// router.push('/about')router.push({path: '/about'//等价于RouterLink})// 表示前进一个页面，在有历史记录的时候适合用// router.go(1)// 重定向：做跳转登录的时候会用，是否需要保存当前历史记录，方便后续返回。// router.replace('/about')
}
// 后退
const back = () => {router.back()
}
</script>2. 路由传参query
不是路由的一部分，不参与路由的匹配，多写一个少写一个无所谓。
首先需要导入useRoute，用来获取当前路由对象，从而获取参数。
import { useRoute } from 'vue-router'
// useRouter 跳转页面 useRoute传参
const route = useRoute() //获取当前路由对象，从中获得参数传参有两种方式，可以在字符串后面跟?然后问号后面再写参数 ，
<RouterLink to="/about?id=20">编程式：过渡动画页面</RouterLink>也可以在对象中通过query来传参，等价于?
router.push({path: '/about',query: {id: 200}//等价于RouterLink})然后通过router.query来输出传过来的参数即可
console.log(route.query)3.路由传参 params
动态路由参数，是路由的一部分，参与路由的匹配，需要在index.js页面设置动态参数，此时的参数是必传的，而且参数数量也要一致。
{path: '/about/:id',name: 'about',component: () => import('../views/AboutView.vue')}动态路由参数输出是需要用到 params来接收的。
console.log(route.params)动态路由参数和 query路由参数是可以同时存在的。
4.Vue中路由传参方式以及如何接收路由参数?
- 1.使用url拼接字符串的形式传值 vue2使用this.$route.query接收；vue3使用useRoute().query接收
- 2动态路由参数 path: “/list/:id” vue2使用this.$route.params接收；vue3使用useRoute().params接收
- 3.动态路由参数是路由的一部分，参与路由匹配，因此设置几个冒号变量就要设置几个参数，否则匹配不到路由，而?参数不参与路由匹配
- 4.动态路由参数和?参数都会在地址栏中显示。
5.命名路由
命名路由是指在 Vue Router 中为特定路由定义一个名称，以便在代码中引用该路由。通过为路由设置名称，可以更方便地在组件中进行路由导航或进行路由匹配。如果需要更改路由路径，只需在路由配置中更改一处即可，而不必在整个代码库中搜索所有引用该路径的地方。方便后期维护
在 Vue Router 中，通过 name 属性来为路由定义名称。例如：
const routes = [{path: '/about',name: 'about',component: AboutComponent},{path: '/contact',name: 'contact',component: ContactComponent}
];
使用命名路由传参时要用下面的格式，注意：to前面要加:
<RouterLink :to="{ name: 'about', params: { id: 100 }, query: {ids:100,kw:'111'} }">命名路由</RouterLink>