今日讲讲路由配置

2024-03-27 23:52
文章标签 配置 讲讲 路由 今日

本文主要是介绍今日讲讲路由配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

下载安装路由

1. 下载安装路由库
npm i vue-router
2. src 中新建 views 文件夹,在其中新建页面
3. src 中新建一个 router 文件夹,其中新建一个 index.js
import { createRouter, createWebHashHistory } from 'vue-router';
// 导入页面
import index from '../views/index.vue';
import about from '../views/about.vue';
// 注册
const routes = [
{
path: '/', // 路径名,首页是/
name: 'index', // 页面名
component: index, // 组件,页面对应的文件
},
{
path: '/about',
name: 'about',
component: about,
},
];
// 路由实例
const router = createRouter({
history: createWebHashHistory(),
routes, // 所有的路由
});
// 导出
export default router;
4. main.js 中安装路由
import { createApp } from 'vue'
import App from './App.vue'
// 导入路由实例
import router from './router';
// vue实例
const app = createApp(App)
// 在vue实例上安装路由
app.use(router)
app.mount('#app')
5. App.vue 中写出口
<template>
<router-view></router-view>
</template>

路由模式

模式有两种: h5 hash
h5: createWebHistory;http://localhost:5173/about;刷新404
hash:createWebHashHistory;http://localhost:5173/#/about

捕获404页面

1. 新建一个 404 页面( NotFound
2. 导入页面
3. 在配置数组中添加如下:
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
        

重定向

使用redirect属性

{
path: '/:pathMatch(.*)*',
name: 'NotFound',
redirect: '/'
},

这篇关于今日讲讲路由配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/853822

相关文章

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一:源码安装:1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

Linux下进程的CPU配置与线程绑定过程

《Linux下进程的CPU配置与线程绑定过程》本文介绍Linux系统中基于进程和线程的CPU配置方法,通过taskset命令和pthread库调整亲和力,将进程/线程绑定到特定CPU核心以优化资源分配... 目录1 基于进程的CPU配置1.1 对CPU亲和力的配置1.2 绑定进程到指定CPU核上运行2 基于

Spring Boot spring-boot-maven-plugin 参数配置详解(最新推荐)

《SpringBootspring-boot-maven-plugin参数配置详解(最新推荐)》文章介绍了SpringBootMaven插件的5个核心目标(repackage、run、start... 目录一 spring-boot-maven-plugin 插件的5个Goals二 应用场景1 重新打包应用

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S