Vue3配置路由

news/2024/7/10 0:48:34 标签: vue, vue.js, 路由

文章目录

    • 一、创建index.js
    • 二、main.js的配置
    • 三、在App.vue中引入

一、创建index.js

在src文件夹中创建router文件夹,并在其中创建index.js文件

//引入路由对象
import { createRouter,createWebHistory } from 'vue-router'
import PufMac from "../views/pufmac/PufMac.vue";

const router = createRouter({
    history:createWebHistory(import.meta.env.BASE_URL),
    routes:[
        {
            path:'/',
            redirect:'/pufmac'
        },
        {
            path:'/pufmac',
            component:PufMac
        }
    ]
})

export default router

引入对应的组件,配置对应的路径,需注意这里与vue2的区别(在import和create方面的区别)。

二、main.js的配置

在main.js中,引入路由,这里还引入了element plus

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

vue_45">三、在App.vue中引入

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

http://www.niftyadmin.cn/n/5063538.html

相关文章

进入k8s下mysql docker容器,设置慢查询开关

服务器账号信息&#xff1a;wps/kingsoft 进入mysql容器&#xff1a; kc exec -ti -n kube-public mysql-0 -- bash 访问数据库&#xff1a; mysql -h10.13.83.171 -uhuangweiheng -phuangweiheng_password; 数据库超管&#xff1a;root/wpsepmysql sudo service mysql r…

HTML5+CSS3+JS小实例:鼠标滚轮水平滚动

实例:鼠标滚轮水平滚动 技术栈:HTML+CSS+JS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="…

ChatGPT多模态升级,支持图片和语音,体验如何?

一、前言 9 月 25 日&#xff0c;ChatGPT 多模态增加了新的语音功能和图像功能。这些功能提供了一种新的、更直观的界面&#xff0c;允许我们与 ChatGPT 进行语音对话或展示我们正在谈论的内容。 ChatGPT 现在可以看、听、和说话了&#xff0c;而不单单是一个文本驱动的工具了。…

【LeetCode热题100】--148.排序链表

148.排序链表 对链表进行排序最适合的算法就是归并排序&#xff1a; 对链表自顶向下归并排序的过程&#xff1a; 找到链表的中点&#xff0c;以中点为分界&#xff0c;将链表拆分成两个子链表&#xff0c;寻找链表的中点可以使用快慢指针的做法&#xff0c;快指针每次移动 2步…

[Spring] Spring5——IOC 简介(二)

目录 六、工厂 Bean&#xff08;Factory&#xff09; 1、普通 bean 2、工厂 bean 3、示例 七、Bean 的作用域 1、单例和多例 2、如何设置为单实例或多实例 八、Bean 的生命周期 1、生命周期 2、生命周期示例 3、Bean 的后置处理器 4、后置处理器示例 九、XML 的自…

Spring 框架知识点汇总 (持续更新)

1、<context:annotation-config /> 标签 Spring MVC的配置方案&#xff0c;标签会自动注册下列的4个bean: 1) AutowiredAnnotationBeanPostProcessor 对应于使用AutoWired注解 2)CommondAnnotationBeanPostProcessor 对应于使用Resource、PostConstruct、Predestor…

采集SEO方法-添加链接段落

采集大量的文章数据&#xff0c;要想批量做SEO添加链接段落方法&#xff0c;可以使用简数采集器的处理规则实现。 简数采集器的一个处理规则&#xff0c;可以包含多种SEO方法&#xff0c;还可自由组合&#xff0c;强大灵活方便。 添加补充链接段落的SEO技巧&#xff1a; 1&a…

【项目】web服务器

socket 套接字&#xff1a;所谓 socket&#xff08;套接字&#xff09;&#xff0c;就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象&#xff0c;一个套接字就是网络上进程通信的一端&#xff0c;是应用程序通过网络协议进行通信的接口。socket 可以看成是两个网…