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. 1.使用url拼接字符串的形式传值  vue2使用this.$route.query接收；vue3使用useRoute().query接收
2. 2动态路由参数 path: “/list/:id”  vue2使用this.$route.params接收；vue3使用useRoute().params接收
3. 3.动态路由参数是路由的一部分，参与路由匹配，因此设置几个冒号变量就要设置几个参数，否则匹配不到路由，而?参数不参与路由匹配
4. 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>