vue系列==vue路由

1、首先需要在Vue主体项目中安装与配置VueRouter路由插件，构建出基础的路由切换与路由渲染，然后在此基础上不断扩展与强化路由功能。

2、● 动态组件加载。● 配置简单路由。● 路由链接高亮显示。● 嵌套路由。● 动态路由传参。● 路由参数映射。● 命名路由切换。● 命名视图渲染。● 编程式路由导航。● 路由过滤筛选。● 路由过渡动画效果。● 路由滚动行为。● 路由的异步懒加载。● 缓存路由组件。● 路由守卫。● 动态添加与删除路由

3、比如，对于两个页面之间的数据传递、设置嵌套页面等常见操作，利用动态组件加载是不容易处理的。也正是因为这些局限，才需要利用VueRouter插件来实现更好的页面切换和维护操作。
//定义状态刷新
const selectPage = ref(null)   //设置选中组件ref对象

//页面切换方法
const changePage = (page) => {
  selectPage.value = page
}

//初始化页面
changePage(Home)


</script>

<template>


  <button @click="changePage(HelloWorld)">Hello World</button>
  <button @click="changePage(Home)">Home</button>
  <button @click="changePage(User)">User</button>

  <component :is="selectPage"></component>
</template>

2、配置简单路由

1、加载不能实现的。在使用路由功能之前，我们需要明确，Vue本身并不包含路由功能。想要使用路由功能，则要通过官方的Vue插件VueRouter来实现。在正式使用路由功能之前，我们需要做的准备工作就是安装VueRouter插件包。

2、进行项目的路由操作之前，必须先创建静态路由表，并给路由页面逐个分配地址

3、

在main.js文件中配置
import App from './App.vue'

// 引入路由组件
import Home from '@/views/Home.vue'
import User from '@/views/User.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
// 配置路由表
const routes = [
  { path: '/', component: Home },
  { path: '/user', component: User }
]

//构建路由器对象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
//将路由器对象注入到Vue实例中
createApp(App)
    .use(router)
    .mount('#app')
在app.vue中进行配置
<template>

  <router-link to="/">首页</router-link>
  <router-link to="/user">用户页面</router-link>
  <hr>

  <router-view></router-view>

</template>

3、路由链接高亮显示

3.1 利用vue-router模块的内置样式实现路由链接高亮显示

1、router-link-active的意思是链接激活状态，vue-router内置完成了激活状态的判断和样式类的设置操作，开发人员可以直接设置router-link-active对应的样式

2、
<style scoped>
  /* 这里可以写一些全局的样式 */
  .router-link-active {
    color: Red;
  }


</style>

3.2 利用active-class属性实现路由链接高亮显示

3.3利用vue-router模块的linkActiveClass全局配置实现路由链接高亮显示

3.4利用router-link的slot实现自定义标签与高亮显示

1、但是router-link默认渲染的标签目标是a，如果想渲染button按钮又应该如何处理呢？毕竟在实际开发的布局控制中，想要放置的不一定是a标签，也可能是button、div、span、p等其他的任意标签，同时希望通过点击这些标签实现页面切换。

2、在router-link上可以设置custom属性来控制路由链接内容是否被包裹在a元素内，还可以利用v-slot传递一个对象，这个对象中可以包含href（链接地址）、route（当前路由对象）、navigate（导航函数）、isActive（是否激活）、isExactActive（是否精确激活）等不同的参数。在下面的讲解中仅传递了navigate与isActive两个参数

3、在Vue Router中，<router-link>组件默认渲染为一个<a>标签，但有时你可能需要将其渲染为其他类型的标签，如<button>。为了实现这一点，Vue Router允许你使用v-slot和custom属性来自定义渲染内容。

4、
//这个按钮就不会显示出a链接了  
<div style="display: flex;">
      <router-link to="/user" style="margin-right: 10px">首页</router-link>


      <router-link to="/" custom v-slot="{ isActive ,navigate }">
        <button @click="navigate" :class="{ active: isActive }" >首页内容</button>
      </router-link>

      <router-link to="/" >
        <span style="color: red;">首页内容</span>
      </router-link>

  </div>
5、

v-slot="{ navigate, isActive }"：这个指令允许你访问<router-link>的内部插槽属性。在这个例子中，我们只使用了navigate（用于触发导航的函数）和isActive（一个布尔值，表示链接是否处于活跃状态）。

custom：这个属性告诉<router-link>不要渲染默认的<a>标签，而是使用插槽内容。

@click="navigate"：这是一个事件监听器，它会在按钮被点击时调用navigate函数，从而触发路由导航。

:class="{ 'active-class': isActive }"：这是一个动态类绑定，它根据isActive的值来决定是否给按钮添加一个类（例如，active-class）。这样你就可以为活跃状态的路由链接应用不同的样式。
<router-link to="/user" v-slot="{ navigate, isActive }" custom>
  <button :class="{ 'active-class': isActive }" @click="navigate">
    用户页面
  </button>
</router-link>

4、路由嵌套

1、因为用户模块存在嵌套，所以可以在Users的路由配置表中添加children属性。children属性值是一个数组类型的，主要用来明确用户模块将要嵌套的子路由。数组中的书写格式可以和简单路由配置操作模式的格式相同，然后利用这种模式添加路由对象内容，其中包括UserStart、UserDetail、UserEdit。此时各子路由相关信息如表5-3所示。

2、Vue Router 支持嵌套路由，允许您在应用程序中创建多层嵌套的组件结构。您可以通过定义嵌套路由并在组件中使用 <router-view> 来实现这一点。例如，您可以在 User 组件的模板内添加一个 <router-view>，然后在路由配置中定义 children 来指定子路由。这样，当访问特定的 URL 时，相应的子组件就会在 User 组件的 <router-view> 中渲染

3、
<template>
  <div>
    
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/" class="text-decoration-none">首页</router-link>
        </li>
        <li class="breadcrumb-item active">
          <router-link to="/users" class="text-decoration-none">用户</router-link>
        </li>
      </ol>
    </nav>
    
    <div class="row">
      
      <div class="col-3">
        <h1>用户列表</h1>
        <div class="list-group">
            <router-link
            to="/users/detail"
            class="list-group-item list-group-item-action"
            >用户 1</router-link>
          <router-link
            to="/users/detail"
            class="list-group-item list-group-item-action"
            >用户 2</router-link >

        </div>
      </div>
      

      <router-view></router-view>


    </div>
  </div>
</template>
import { createRouter, createWebHashHistory } from 'vue-router'
// 配置路由表
const routes = [
  { path: '/', component: Home },
    // 路由嵌套，在user下有三个子路由
  {
    path: '/users', component: User,
    children: [
      { path: '', component: UserStart },
      { path: 'detail', component: UserDetail },
      { path: 'edit', component: UserEdit }
    ]
  }
]

//构建路由器对象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
//将路由器对象注入到Vue实例中
createApp(App)
    .use(router)
    .mount('#app')

5、动态路由传参

1、路由传参共有两种方式，分别是使用params参数传参和使用query参数传参。

2、路由传参共有两种方式，分别是使用params参数传参和使用query参数传参。

3、

5.1params传递参数

1、path修改为：id，其中冒号是占位符，用来确认当前是路由的params参数；id是用户自定义的参数名称，也可以是uid或者userId等任意名称。因此就可以归纳出，路由路径的最终形式为：xxx。

2、对to路由跳转目标属性进行动态数据的绑定，利用模板字符串进行动态拼接“/users/${id}”的设置。最终产生的路由跳转目标链接应该是类似/users/1、/users/2...的地址内容。
    <div class="row">
      
      <div class="col-3">
        <h1>用户列表</h1>
        <div class="list-group">

          <router-link v-for="id in ids" :key="id" :to="`/users/${id}`"   >用户{{id}}</router-link>

        </div>
      </div>
      

      <router-view></router-view>
4、接受参数

$route.params.id实现的。现在可以对vue-router模块的params参数做一个总结：设参在路由部分，传参在链接部分，接参和用参在组件部分。
<template>
  <div>
    <h1>用户详情</h1>
    
    <p>用户ID: {{ $route.params.id }}</p>
    <router-link to="/users/edit" class="btn btn-primary">编辑用户</router-link>
    <div>asdfasdfasdf</div>
    <router-view></router-view>
  </div>
</template>
5、其他方式使用路由
<router-link :to="{ name: 'User', params: { id: 123 }}">User 123</router-link>
6、接参数
在组件中使用    
<h2>{{$route.query.age}}</h2>

在编程中使用
<script setup>

  import {useRoute} from "vue-router";
// 这是vue3中使用useRoute的例子，不能直接使用this.$route，而是使用useRoute()方法获取路由信息。
  let useRoute1 = useRoute();
  console.log(useRoute1.params.id);


</script>

5.2query参数

1、现在可以对vue-router模块的参数做一个简单总结：它主要分成params与query两种参数类型，params参数的设参在路由部分，传参在链接部分，接参和用参在组件部分；query参数的设参和传参在链接部分，接参和用参在组件部分。

6、路由参数映射

1、使用函数的方式将params、query参数，以及自定义的静态常量对象属性进行映射时，在函数中需要书写一个参数，用于接收当前路由对象route。我们可以利用函数返回一个对象，在这个返回的内容中就可以使用route对象内容。而route中自然包含params和query参数，至于自定义的静态常量对象属性，我们依然可以为其设置固定值。

2、

// 配置路由表
const routes = [
  { path: '/', component: Home },
    // 路由嵌套，在user下有三个子路由
  {
    path: '/users', name: 'users', component: User,
    children: [
      { path: '', component: UserStart },
      { path: ':id', component: UserDetail },
      { path: ':id/edit', component: UserEdit ,
        // 函数类型组件，接收参数，包括params、query、hash、fullPath等属性
        props:(route) => ({
          id: route.params.id,
          staticClass: 'user-edit',
          // 动态路由参数
          name: route.query.name,
          age: route.query.age
        })
      }
    ]
  }
]

<template>
  <div>
    <h1>编辑asdfasdfasf用户</h1>
    <p>用户名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <p>id：{{id}}</p>
    <p>静态类：{{staticClass}}</p>
  </div>
</template>
<script setup>

  import {useRoute} from "vue-router";
// 这是vue3中使用useRoute的例子，不能直接使用this.$route，而是使用useRoute()方法获取路由信息。
  let useRoute1 = useRoute();
  console.log(useRoute1.params.id);
  let props = defineProps(['name', 'age', 'id' ,'staticClass']);


</script>

6.1拆分路由配置代码

1、一定要记得利用export default进行模块的暴露操作，否则之前设置的路由配置就会失效。

7命名路由切换

1、现在已经给编辑用户页的路由设置了name属性，那么也可以尝试将查看用户详情页的UserDetail组件中的router-link路由跳转从字符串拼接模式修改成对象模式，只需设置name、params、query参数即可

2\=
  <div>
    <h1>用户详情</h1>

    <p>用户ID: {{ $route.params.id }}</p>

    <router-link :to="{
        name: 'UserEdit',
        params: {
          id: $route.params.id,
        },
        query: {
          name: 'asfdas',
          age: 18,
        },
    }" class="btn btn-primary">编辑用户</router-link>

8、命名视图渲染

8.1命名视图的基本应用

1、①component配置属性从单数变成复数，也就是components，这意味着其不再是一对一的简单关系。②components属性的类型从组件类型变成对象类型，并且对象中包含一个default对象属性内容，这个类型才是真正的组件类型，可以对应到原来component所对应的Home组件

2、固定在相关的页面中，只要关注好路由配置就可以了
// 配置路由表
const routes = [
  { path: '/',
      components: {
          default: Home,
          // 命名视图，可以方便的切换到不同子视图
          "routerHeader": () => import('@/components/Header.vue'),
          "routerFooter": () => import('@/components/Footer.vue')
      }
  },
    // 路由嵌套，在user下有三个子路由
<template>

  <router-view name="routerHeader"></router-view>


  <router-view></router-view>

  <router-view name="routerFooter"></router-view>

</template>

8.2嵌套路由中命名视图的应用

1、嵌套路由也是一样，参照相同的方法就可以执行了的

9、编程式路由导航

1、如push（跳转）、replace（替换）、go（横跨历史）、forward（前进）、back（后退）等

2、

10、开发注意事项

1、在 Vue.js 应用中，特别是使用 Vue Router 时，useRoute 和 useRouter 是两个常用的组合式 API 函数，它们提供了不同的功能：

2、

useRouter

定义：useRouter 函数返回 Vue Router 实例，该实例是全局的，可以在应用中的任何组件内使用。
用途：它提供了导航方法，如 push, replace, go 等，用于控制路由跳转

3、

useRoute

定义：useRoute 函数返回当前激活的路由对象，该对象是响应式的，包含当前路由的参数、查询参数、路径等。
用途：它用于访问当前路由的信息，例如读取路径参数、查询字符串等

11、路由过滤筛选

1、我们可以使用自动重定义路由来实现，需要在配置路由时配置redirect选项来实现自动转向指定路由

2、可以设置404页面进行跳转

    // 404路由
    {
        path: '/404',
        name: '404',
        component: () => import('@/views/notFound/index.vue')
    },

      // 不匹配的任意路由转发请求都自动重定向404页面
    {
        path: '/:notFound(.*)',
        redirect: ()=>({name: '404'}),
        // redirect: '/404',
        // redirect: {name: '404'},
        // redirect: () => ({name: '404'}),
    },

12、路由过渡动画效果

13、路由的异步懒加载

1、当前首页、用户页、查看用户详情页、编辑用户页、头部与底部等组件内容都是在路由页面(router/index.js)中通过“import Xxx from'＠/views/Xxx'”将对应模块内容进行静态引入的，此时就有一个弊端，即不管当前操作是否需要该模块内容，都需要将其引入。现在可以尝试利用“const Xxx=（）=>import（'＠/views/Xxx'）”的模式进行动态模块引入，从而替换原来的静态模块引入操作。

2、上面就是静态加载和动态加载的区别

原文地址：https://blog.csdn.net/qq_39317095/article/details/143445324

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：大学城水电管理系统开发：Spring Boot指南
下一篇：MMed-RAG：专为医学视觉语言模型设计的多功能多模态系统

目标检测(object detection)
目标检测广泛应用在多个领域：无人驾驶，机器人…那么如何去定位一个目标的位置呢？
阅读更多2024-11-15
目标检测评估指标详解
特别是IoU，它在目标检测中用于评估预测框的定位准确性，是其他指标（如TP、FP、FN等）的基础。1.正样本（Positive Sample）：在目标检测任务中，指的是那些确实包含目标物体的图像区域。
阅读更多2024-11-15
《目标检测》R-CNN网络基础（RCNN，Fast-RCNN）
训练阶段多，训练耗时：微调CNN⽹络+训练SVM+训练边框回归器。预测速度慢: 使⽤GPU, VGG16模型处理⼀张图像需要47s。占⽤磁盘空间⼤：5000张图像产⽣⼏百G的特征⽂件。数据的形状变化
阅读更多2024-11-15
第5章: 图像变换与仿射操作
在 Pillow 中，我们将此矩阵简化为六个参数。# 创建自定义仿射变换案例：生成透视效果通过调整仿射变换矩阵的参数，可以创建透视效果，使图像看起来像从不同角度拍摄。# 创建透视效果。
阅读更多2024-11-15
itss认证的作用
认证的作用
阅读更多2024-11-15
什么是HTTP，什么是HTTPS？HTTP和HTTPS都有哪些区别？
什么是HTTP，什么是HTTPS？HTTP和HTTPS都有哪些区别？
阅读更多2024-11-15
kafka中topic的数据抽取不到hdfs上问题解决
将json文件抽取到kafka的消息队列（topic）中，再从topic中将数据抽取到hdfs。我们在从kafka中topic的数据抽到hdfs上的时候会出现 flume不报错，但也不抽取的情况。其实
阅读更多2024-11-15
聊天服务器(5)数据库环境搭建和编程
设置中文。
阅读更多2024-11-15
Ubuntu 22.04.4 LTS + certbot 做自动续签SSL证书(2024-11-14亲测)
在运行上述命令时，Certbot 可能会提示您选择一个或多个域名，并询问您是否希望将所有流量重定向到 HTTPS。Certbot 是一个易于使用的客户端，它可以自动获取和安装 SSL/TLS 证书，以
阅读更多2024-11-15
探秘 RPC：揭开远程过程调用的实现原理
概念理解RPC 旨在让开发人员在构建分布式系统时，无需过多关注底层网络通信的细节，就能够像在本地调用函数那样去调用远程服务器上的服务或方法。例如，在一个电商系统中，订单服务可能部署在一台服务器上，而库
阅读更多2024-11-15

vue系列==vue路由

1、路由的核心功能

2、配置简单路由

3、路由链接高亮显示

3.1 利用vue-router模块的内置样式实现路由链接高亮显示

3.2 利用active-class属性实现路由链接高亮显示

3.3利用vue-router模块的linkActiveClass全局配置实现路由链接高亮显示

3.4利用router-link的slot实现自定义标签与高亮显示

4、路由嵌套

5、动态路由传参

5.1params传递参数

5.2query参数

6、路由参数映射

6.1拆分路由配置代码

7命名路由切换

8、命名视图渲染

8.1命名视图的基本应用

8.2嵌套路由中命名视图的应用

9、编程式路由导航

10、开发注意事项

`useRouter`

`useRoute`

11、路由过滤筛选

12、路由过渡动画效果

13、路由的异步懒加载

vue系列==vue路由

1、路由的核心功能

2、配置简单路由

3、路由链接高亮显示

3.1 利用vue-router模块的内置样式实现路由链接高亮显示

3.2 利用active-class属性实现路由链接高亮显示

3.3利用vue-router模块的linkActiveClass全局配置实现路由链接高亮显示

3.4利用router-link的slot实现自定义标签与高亮显示

4、路由嵌套

5、动态路由传参

5.1params传递参数

5.2query参数

6、路由参数映射

6.1拆分路由配置代码

7命名路由切换

8、命名视图渲染

8.1命名视图的基本应用

8.2嵌套路由中命名视图的应用

9、编程式路由导航

10、开发注意事项

useRouter

useRoute

11、路由过滤筛选

12、路由过渡动画效果

13、路由的异步懒加载

相关文章

`useRouter`

`useRoute`