web学习条记（六十四）

目录

1.路由的声明式跳转和编程式跳转
1.1声明式跳转
1.2编程式跳转
2. 路由传参query
3.路由传参 params
4.Vue中路由传参方式以及如何接收路由参数?
5.定名路由

---

1.路由的声明式跳转和编程式跳转

我们在这篇文章中提到的路由都是前端路由，是用来匹配组件完成跳转的，而后端路由则是为了获取json数据的。
1.1声明式跳转

1.       <RouterLink to="/">Home</RouterLink>
2.       <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') 表示路由的重定向，这个操作不会保留历史记录，比较恰当用在跳转登录页面。括号内可以写字符串也可以写成对象的形式。

1. <template>
2.   <div>
3.     <!-- -->
4.     <button @click="go">过渡动画页面</button>
5.     <button @click="back">后退</button>
6.   </div>
7. </template>
9. <script setup>
10. import { useRouter, useRoute } from 'vue-router'
11. // useRouter 跳转页面 useRoute传参
12. const router = useRouter() //获取路由对象。调用方法跳转
13. const route = useRoute() //获取当前路由对象，从中获得参数
15. // 前进
16. const go = () => {
17.   // router.push('/about')
18.   router.push({
19.     path: '/about'//等价于RouterLink
20.   })
21.   // 表示前进一个页面，在有历史记录的时候适合用
22.   //   router.go(1)
23.   // 重定向：做跳转登录的时候会用，是否需要保存当前历史记录，方便后续返回。
24.   // router.replace('/about')
25. }
26. // 后退
27. const back = () => {
28.   router.back()
29. }
30. </script>

复制代码

2. 路由传参query

不是路由的一部分，不加入路由的匹配，多写一个少写一个无所谓。
首先必要导入useRoute，用来获取当前路由对象，从而获取参数。

1. import {  useRoute } from 'vue-router'
2. // useRouter 跳转页面 useRoute传参
3. const route = useRoute() //获取当前路由对象，从中获得参数

复制代码

传参有两种方式，可以在字符串后面跟?然后问号后面再写参数 ，

1.     <RouterLink to="/about?id=20">编程式：过渡动画页面</RouterLink>

复制代码

也可以在对象中通过query来传参，等价于?

1. router.push({
2.     path: '/about',
3.     query: {
4.       id: 200
5.     }//等价于RouterLink
6.   })

复制代码

然后通过router.query来输出传过来的参数即可

1.   console.log(route.query)

复制代码

3.路由传参 params

动态路由参数，是路由的一部分，加入路由的匹配，必要在index.js页面设置动态参数，此时的参数是必传的，而且参数数量也要一致。

1.     {
2.             path: '/about/:id',
3.             name: 'about',
4.             component: () => import('../views/AboutView.vue')
5.         }

复制代码

动态路由参数输出是必要用到  params来接收的。

1.   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 属性来为路由定义名称。例如：

1. const routes = [
2.   {
3.     path: '/about',
4.     name: 'about',
5.     component: AboutComponent
6.   },
7.   {
8.     path: '/contact',
9.     name: 'contact',
10.     component: ContactComponent
11.   }
12. ];

复制代码

 使用定名路由传参时要用下面的格式，留意：to前面要加:

1.     <RouterLink :to="{ name: 'about', params: { id: 100 }, query: {ids:100,kw:'111'} }">命名路由</RouterLink>

复制代码

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