今日讲讲路由配置

下载安装路由

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.mzph.cn/news/774659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows python多版本共享方案

1、先安装好python3.11 2、安装好python3.7 这时默认版本是python3.7&#xff0c; A、如果要切换回python3.11则修改环境变量即可 B、 如果想使用3.7&#xff0c;找到python3.7的安装路径 如果想使用3.7 C:\Users\用户\AppData\Local\Programs\Python\Python37 复制python…

零基础学python之高级编程(6)---Python中进程的Queue 和进程锁,以及进程池的创建 (包含详细注释代码)

Python中进程的Queue 和进程锁,以及进程池的创建 文章目录 Python中进程的Queue 和进程锁,以及进程池的创建前言一、进程间同步通信(Queue)二、进程锁&#xff08;Lock&#xff09;三、创建进程池Poorpool 类方法: End! 前言 大家好,上一篇文章,我们初步接触了进程的概念及其应…

【tingsboard开源平台】环境准备和安装

文章目录 环境准备:1.安装JAVA2.安装maven环境3.安装nodeJS(16.15.1)4.安装git环境5.安装npm依赖关系6.放入文件fetched7.安装IDEA 环境准备: 1.安装JAVA 以安装java11为例&#xff0c;安装tingsboard需要的jdk 下载地址&#xff1a;https://www.oracle.com/java/technologi…

Python邮件发送之yagmail

目录 一、背景 二、前提-邮件服务开通 1、启用SMTP服务 2、生成授权码 二

初识C++(二)引用,内联函数,auto

目录 1.引用的概念与用法&#xff1a; 1.1引用特性&#xff1a; 1.2使用场景 1.2.1做参数 1.3传值、传引用效率比较 1.4引用做返回值 1.5引用和指针的对比 2.内联函数 3.auto关键字 4. 基于范围的for循环(C11) 5.指针空值nullptr(C11) 1.引用的概念与用法&#xff1a;…

腾讯云4核8G服务器支持多少人同时在线?

腾讯云4核8G服务器价格&#xff1a;轻量4核8G12M优惠价格646元15个月、CVM S5服务器4核8G配置1437元买1年送3个月。腾讯云4核8G服务器支持多少人同时在线&#xff1f;支持30个并发数&#xff0c;可容纳日均1万IP人数访问。腾讯云百科txybk.com整理4核8G服务器支持多少人同时在线…

独立看门狗

什么是独立看门狗&#xff1f;它有什么用&#xff1f;什么时候用&#xff1f;不用行不行&#xff1f; 独立看门狗&#xff08;Independent Watchdog&#xff0c;简称IWDG&#xff09;是一种微控制器中常见的硬件保护机制。它的主要作用是监视系统的运行状态&#xff0c;当系统出…

2024 年 15 个最佳自动化 UI 测试工具【建议收藏】

Web 开发行业正在不断发展&#xff0c;许多最佳自动化 UI 测试工具可用于测试基于 Web 的项目&#xff0c;以确保它没有错误并且每个用户都可以轻松访问。这些工具可帮助您测试您的 Web 项目并使其完全兼容用户端的要求和需求。 UI 自动化测试工具可测试基于 Web 的应用程序或软…

VS2017(高版本)调用Levmar库调用时报错(无法解析的外部符号 __imp___vsnprintf 及__iob_func)

1、无法解析的外部符号 __imp___vsnprintf 出现这个问题的原因是 vs2015 默认编译时将许多标准库采用内联方式处理&#xff0c;因而没有可以链接的标准库文件&#xff0c;所以要专门添加标准库文件来链接标准库中的函数。 在 vs2017工程选项&#xff0c;链接器附加依赖项里面添…

【C语言】 字符输入输出函数getchar()和 putchar()的用法

文章目录 C语言中的字符输入输出函数&#xff1a;getchar与putchargetchar函数putchar函数C语言中的字符输入输出函数知识点总结结语 C语言中的字符输入输出函数&#xff1a;getchar与putchar 在C语言中&#xff0c;我们经常需要从用户那里读取输入&#xff0c;或向用户显示输…

第2章信息系统项目管理基础

还没排版之后有时间了重新排版 1、项目的特点:(1)临时性(一次性)(2)独特的产品、服务或成果(3)逐步完善(4)资源约束(5)目的性 2、战略管理包括以下三个过程:①战略制定②战略实施③战略评价 3、PRINCE2提供最佳的项目管理方法论,更加接近项目的实施,更加重视…

JRT菜单

上一章搭建了登录界面的雏形和抽取了登录接口。给多组使用登录和菜单功能提供预留&#xff0c;做到不强行入侵别人业务。任何产品只需要按自己表实现登录接口后配置到容器即可共用登录界面和菜单部分。最后自己的用户关联到JRT角色表即可。 登录效果 这次构建菜单体系 首先用…

使用conda配置python环境

# 基于 python3.6 创建一个名为test_py3 的环境 conda create --name env_py3 python3.6 # 基于 python2.7 创建一个名为test_py2 的环境 conda create --name env_py2 python2.7 # 激活 test 环境 source activate env_py2 或 conda activate env_py2 # 切换到python3 s…

2024年腾讯云服务器最新4核8G服务器价格,轻量CVM报价

2024年腾讯云服务器最新4核8G服务器价格646元15个月&#xff08;买一年送3个月&#xff09;配置为轻量应用服务器、4核8G12M、12M带宽、2000GB月流量、上海/广州/北京、180GB SSD云硬盘、646元15个月&#xff1b;云服务器CVM S5、4核8G、1M/3M/5M带宽可选、不限制流量、上海、5…

深入理解 Vue 3.0 宏函数:提升组件代码的工程化与可维护性

Vue 3.0 宏函数详解&#xff1a;defineProps、defineEmits、defineExpose、defineSlots 和 defineOptions 在 Vue 3.0 中&#xff0c;为了更好地组织和维护组件代码&#xff0c;引入了几个新的宏函数。这些宏函数包括 defineProps、defineEmits、defineExpose、defineSlots 和…

Transformer的前世今生 day09(Transformer的框架概述)

前情提要 编码器-解码器结构 如果将一个模型分为两块&#xff1a;编码器和解码器那么编码器-解码器结构为&#xff1a;编码器负责处理输入&#xff0c;解码器负责生成输出流程&#xff1a;我们先将输入送入编码器层&#xff0c;得到一个中间状态state&#xff0c;并送入解码器…

号码采集协议讲解

仅供学习研究交流使用 需要的进去拿源码或者成品

上位机图像处理和嵌入式模块部署(qmacvisual图像拼接)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 qmacvisual本身提供了图像拼接的功能。功能本身比较有意思的。大家如果拍过毕业照&#xff0c;特别是那种几百人、上千人的合照&#xff0c;应该就…

Rust编程(二)语法和数据类型

编程规范 类C语法&#xff0c;函数需要定义&#xff0c;指令需要以&#xff1b;结尾。需要大括号{} 文件名&#xff0c;变量&#xff0c;函数命名使用snake case&#xff0c;eg&#xff1a;new_function() 结构体&#xff0c;特征命名&#xff0c;使用大驼峰命名&#xff0c;e…

浏览器中输入地址回车后发生了什么?

目录 Step 1&#xff1a;浏览器输入域名&#xff0c;例如输入&#xff1a;www.baidu.com Step 2&#xff1a;浏览器查找域名的 IP 地址&#xff08;DNS 解析&#xff09; Step 3&#xff1a;浏览器与目标服务器建立 TCP 连接&#xff08;3次握手&#xff09; Step 4&#xf…