web学习笔记（六十四）

shan33__

已于 2024-07-12 20:46:57 修改

阅读量801

点赞数 23

分类专栏：笔记文章标签：前端学习笔记 vue.js 开发语言

于 2024-06-07 10:52:42 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/139507927

版权

笔记专栏收录该内容

83 篇文章 6 订阅

订阅专栏

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
  })

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

  console.log(route.query)

3.路由传参 params

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

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

动态路由参数输出是需要用到 route.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>

6. 嵌套路由

嵌套路由（Nested Routing），也称为子路由，是前端路由系统中的一种路由配置方式，它允许你在一个主路由（父路由）中嵌套另一个或多个子路由。这种方式有助于构建复杂的视图结构，使应用程序的页面能够更清晰地组织和管理。通过嵌套路由，可以实现多级嵌套的视图结构，使得每个路由组件只关注自己的一部分逻辑，增强了代码的可维护性和模块化。

配置嵌套路由的步骤：

（1）在父组件发路由中写入 children然后将子组件以数组元素的形式配置在 children内部：

  {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/AboutView.vue'),
            children: [
                {
                 
                    path: 'one',
                    name: 'one',
                    component: one,

                },
                {
                    path: 'two',
                    name: 'two',
                    component: () => import('../views/two.vue'),

                }
            ]
        },

（2）在父路由页面配置RouterLink标签和RouterView占位符，一定要写RouterView，否则页面无法正常渲染。

    <div>
        <RouterLink to="/about/one">one</RouterLink>
        <RouterLink to="/about/two">two</RouterLink>
        <!-- 需要占位符RouterView才可以匹配二级路由组件 -->
         <RouterView></RouterView>
    </div>

二级嵌套路由不能以/开头，vue路由中，凡是以/开头的路由，不管在哪儿配置统统是一级路由。在页面中想访问二级路由，必须携带一级路由才可以
如何配置默认二级路由？

在加载一级路由的时候默认加载这个二级路由组件。防止二级页面初始空白问题。需要将二级路由的path值设置为空。

  {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/AboutView.vue'),
            children: [
                {
                 
                    path: '',
                    name: 'one',
                    component: one,

                },
                {
                    path: 'two',
                    name: 'two',
                    component: () => import('../views/two.vue'),

                }
            ]
        },