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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]