vite+vue3.0项目如何引入vue-router

已于 2022-12-14 16:39:23 修改
阅读量820 收藏
点赞数
分类专栏： Vue3.0技术（持续更新中...） 文章标签： vue.js javascript 前端
于 2022-12-12 11:19:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44162077/article/details/128284295
版权
本文介绍了如何在Vite+Vue3.0项目中集成vue-router，包括安装步骤、创建router目录、配置index.js以及在main.js中挂载使用的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、第一步安装vue-router

npm install vue-router@4

二、在项目目录下创建一个文件夹router，下面再创建index.js文件 如图
在这里插入图片描述
三、如下图配置 具体配置见 vue-Router官网
在这里插入图片描述

四、在main.js里面挂载即可使用
在这里插入图片描述

vue3 + vite 项目搭建 - 引入vue-router及实现权限控制
qq_40026668的博客
08-04 2024
一般后台管理系统都会有管理员和普通用户的区分，所以要做权限控制 思路 创建公用页面login，可以让用户进行登录操作，根据用户信息对应的身份，匹配不同的权限模块 在路由前置钩子进行身份验证拦截，将拦截条件分为 白名单（不做拦截）、登录态未登录、登录态已登陆 路由注册分为两步，公用页面直接注册，权限路由根据登录用户的身份来注册 解决路由层级过深会导致keep-alive不缓存问题 实现 安装依赖 "dependencies": { "nprogress": "^0.2.0", "vue-ro
Vue3项目配置Vue-Router
洛*璃的博客
07-16 2597
在使用作为前端开发框架时，我们通常以的形式进行开发。而单页面应用中，我们通常通过的方式来实现我们页面上组件之间的跳转。在本文中，博主将详细介绍在项目中，如何进行的安装与配置。
vue3 + vite 项目搭建 - 引入vuex
qq_40026668的博客
08-03 1184
预览文档，了解vuex4.0与vuex3.0的差异 安装依赖 "dependencies": { "vuex": "^4.0.2", "vuex-persistedstate": "^4.0.0" }, 在src路径下创建store文件夹，目录结构如图 用vuex实现切换语言，点击按钮增1，注意setup中怎么获取store值，vuex模块取值、注册，以及借助插件实现持久化 // store/store.d.ts declare namespace MyStore { ty.
Vite2+Vue3学习笔记（二）：引入Vue-Router
YGいくこさん的博客
11-27 1485
新手小白Vue3学习笔记第二篇，在项目中使用Vue-Router，简单配置页面跳转路由。
vue3.0+vite+route 新建项目
qq_34465338的博客
05-07 1177
一、安装vite 1、安装node（node.js官网安装）版本大于12.0 2、全局安装vite npm install -g create-vite-app 二、创建项目（此命令只用于vue3.0项目） create-vite-appcreate-vite-app 三、安装依赖 npm install 四、启动项目 npm run dev 上面是最基础的vue3+vite项目，下面开始配置route 查看vue-router版本： npm info vu...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
- vite-vuex vite + vue3.0 + Typescript + vuex - vue-i18n 语言切换版本 - webpack 技术采用 webpack + vue3.0 + Typescript + vuex - uniapp uniapp版本 uniapp +vuex +element scss ``` # 本地开发 启动项目 ...
Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip
10-21
在这个项目中，`daily-cost-main`可能是项目的主入口文件，它包含了整个应用的初始化设置，如Vue实例、Vue Router的配置以及Vant组件的引入。开发者可能使用Composition API来组织组件逻辑，Vue-Router4.0来管理不同...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
Vue3+vite搭建基础架构（6）--- 使用vue-router
weixin_48040732的博客
02-18 1803
这里记录下自己在Vue3+vite的项目使用vue-router的过程，不使用ts语法，方便以后直接使用。
【Vite 】Vite 下配置 vue-router、vuex
最新发布
qq_35712802的博客
08-04 773
等待安装完成，没报错就行。
使用vite在创建vue3项目，遇到的一些样式和引入问题的解决
CHENC0518的博客
03-28 1533
1.今天使用vite想来构建vue3的项目，却发现vite除了快一无是处，整那么多没用的样式，对于想来写后台管理系统的同学很不友好。2.首先我们来清除万恶的css样式（一下样式可独立设置一个global.css，记得在mian.js中引入）5.在src下创建router文件夹，下面创建index.js，并作如下配置。6.记得在main.js中引入，并使用app.use(router)7.到此刻，一个非常友好的初始化项目就ok了。4.接下来，就是router.js的问题了。
使用vite构建Vue项目（element-plus + vue-router）
qq_62830772的博客
07-18 956
在任意目录下运行命令：node -v pnpm -v。
vite+vue-router4.x配置动态路由
ZhuAiQuan的博客
11-21 1487
vite+router.addRoute 后台管理配置动态路由
VueRouter导入
withkai44的博客
06-05 2504
​ --生成随机id 使用 路由 1-1 安装依赖 1-2 引入 router/index.js 1-3 在main.js中使用 1-4 App.vue 全局过滤器 在main.js中挂载在Vue原型上 element-ui 安装依赖 main.js 全局组件 Vuc-cli中的视配 1-1 安装依赖 1-2 配置文件 新建postcss.config.js 1-3 main.js 导入lib-flexible 1-4 public/index.html 将此行注释，关闭视口 1-5 在pc
vite+vue3+ts 创建vue3项目
heavenz19的博客
07-03 307
vite+vue3+ts 创建vue3项目。
vite+vue3+路由配置
jianjian_19的博客
05-19 778
使用vite创建vue3项目,首先在需要创建项目的路径下，利用cmd窗口，输入以下命令。在src目录下，创建src/router/index.js文件。在项目文件夹下，装依赖，执行 npm install。然后输入包名，选择使用技术，这边使用的是vue。然后启动项目 npm run dev。修改App.vue文件代码即可。然后在main.js中引入。开始配置路由，首先安装路由。
vite项目中处理各种静态资源的引入方式介绍
jieyucx的博客
06-27 7624
在vite创建的vue3项目中，引用图片资源有以下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值