vue3.0 路由(创建)

最新推荐文章于 2025-04-16 21:16:02 发布
最新推荐文章于 2025-04-16 21:16:02 发布
阅读量623 收藏
点赞数
文章标签： vue.js 前端 哈希算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48554037/article/details/121021833
版权
本文介绍了如何在Vue3.0中创建路由，重点讲解了SPA单页面应用的优势与缺点，并提供了下载vue-router.js的链接。通过引入路由，结合keep-alive组件和路由懒加载，解决了初始加载慢的问题。文章详细阐述了定义路由组件、创建路由对象及注入根组件的步骤。

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

路由创建

路由 spa单页面应用(single page app)

优点 : 复用页面的公共内容,支持浏览器的前进和后退,刷新后不会回到默认的页面

缺点 : 单页面应用 所有的组件和内容较多 初始加载过慢 浏览器会出现空白
解决办法: 搭配使用 keep-alive组件,缓存不活动的组件 ,使用路由懒加载,按需进行路由加载

先下载vue-router.js

链接：https://pan.baidu.com/s/1yNVUH_YsRhzqvJqCSdgqzg

提取码：sync

引入到需要的地方

图示:
在这里插入图片描述

开始第一步
  1. 定义一个路由组件
    需要注意的是 : 路由组件(页面展示) 一般首字母会大写 和 普通组件(功能模块)
    代码:
  l
最低0.47元/天 解锁文章
九、vue3.0路由配置及跳转
张先森的博客
06-20 4467
vue3.0路由配置及跳转
三、vue3.0之路由(vue-router)配置及语法
热门推荐
张先森的博客
05-27 1万+
vue3.0的路由(vue-router)
VUE router3 路由搭建
m0_74992501的博客
04-12 1044
如果要安装指定版本,在命令后加@指定的版本即可，Vue2对应router版本3，Vue3对应router版本4，这里使用的版本是3。通过路由可以快速实现多页面跳转，是通过改变URL，在不重新请求页面的情况下，更新页面视图。根据不同的url地址展示不同的页面或者数据。上面的链接会一直指向在 NPM 发布的最新版本。在根目录下创建储存定义文件的文件夹，这里我们命名为router下的index.js。在项目根目录打开命令行（windows键+R打开），然后输入。将之前配置好的js文件引入，并挂载。
Vue3.0 - 安装路由 vue-router
技术共享，共同进步！
07-14 6666
Vue3.0 项目常用依赖配置——安装路由 安装依赖 npm install vue-router@next --save src 文件夹下创建 router 文件夹，router 文件夹下创建 index.js 文件 配置 router.js 文件 import {createRouter, createWebHashHistory, createWebHistory} from "vue-router" // 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名） imp
Vue 3 路由配置使用与讲解
最新发布
BANaanaa的博客
04-16 2385
在现代前端开发中，单页应用（SPA）已成为主流趋势，Vue.js 作为一款优秀的 JavaScript 框架，在构建 SPA 方面表现出色。Vue Router 作为 Vue.js 官方的路由管理器，与 Vue.js 核心深度集成，极大地简化了单页应用的路由管理工作。在 Vue 3 中，Vue Router 也进行了升级，带来了新特性与改进，本文将全面深入地介绍 Vue 3 中路由的配置和使用。​。
vue 3.0 安装路由
weixin_33841722的博客
08-23 6212
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3.0路由安装及组合api
qq_41820599的博客
03-22 231
1.安装vue-ruter npm install vue-router@next --save 2.创建router/index文件 import { createRouter,createWebHashHistory} from ‘vue-router’ const router = createRouter({ history: createWebHashHistory(), routes: [ { path: ‘/’, component: () => import(’@/page/ind
vue3.0中vue-router路由的创建及使用
Jonn1124的博客
09-02 5947
下载vue-router,一定要注意版本！ npm install vue-router@/next --save src目录下创建router文件夹，router文件夹下创建index.js vue3.0下需要引入createRouter, createWebHistory 模块去创建路由 createWebHistory 使用history模式 import { createRouter, createWebHistory } from 'vue-router' import Home fr..
VUE3.0 路由详解
m0_58856160的博客
03-07 1797
一，下载安装 此地址可以直接下载https://unpkg.com/vue-router@4 下载后安装： npm install vue-router 二，创建路由 HTML： <template> <!--使用 router-link 组件进行导航 --> <!--通过传递 `to` 来指定链接 --> <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>..
使用Vue CLI方式创建Vue3.0应用程序
pan_junbiao的博客
07-04 1171
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。新版本的 Vue CLI 的包名由原来的 vue-cli 改成了 @vue/cli。在开发大型项目时，需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作，工作效率会非常低。为此，Vue.js 官方提供了一款脚手架生成工具 Vue CLI，通过该工具可以快速构建项目，并实现一下项目的初始配置。
Vue-3.0路由
weixin_46479909的博客
10-14 1172
生活中的路由：设备和ip的映射关系路由就是一种映射关系Vue中路由：路径和组件的映射关系，根据路由就能知道不同路径的，应该匹配渲染哪个组件VueRouter的介绍作用：修改地址栏路径时，切换显示匹配的组件说明：Vue官方的一个路由插件，是一个第三方包官网：https://v3.router.vuejs.org/zh/VueRouter的使用（5+2）5个基础步骤（固定）1）下载：下载VueRouter模块到当前工程，版本3.6.5在终端中输入2）引入3）安装注册4）创建路由对象。
vuecli3创建项目（二）路由的引入
01-07
1. 导入路由组件 npm install vue-router --save 2.配置路由 在router文件夹中创建index.js文件 `import Vue from &#39;vue&#39;; import VueRouter from &#39;vue-router&#39;; Vue.use(VueRouter); const Index = ()`=>import (&#39;views/tab-item/index/Index.vue&#39;);//设置别名 const Notice = ()=>import (&#39;views/tab-item/notice/Notice&#39;) const routes =[ {p
vue3.0路由vue-router的安装和配置
爬楼梯的前端小白的博客
02-14 1817
vue3.0路由vue-router的安装和配置
vue3:router安装与使用
weixin_51785507的博客
08-03 6714
vue3-router路由安装配置使用详解
vue3安装路由简单教程：四步完成
肖肖的博客
11-09 1956
vue3安装路由简单教程：四步完成
Vue3：路由
2301_79526467的博客
05-11 1859
1. 路由简介 2. HelloWorld 　 组件准备 　 routers配置 　 main.js引入路由配置文件 3. 编程式路由（useRouter） 4. 路由传参（useRoute） 5. 路由守卫
Vue——vue3路由搭建
qq_43201350的博客
10-08 905
Vue——vue3路由搭建
Vue总结（三）—— 路由
qq_43776195的博客
03-07 2514
文章目录Vue总结（三）——路由1、路由入门1.1 路由分类1.2 基本使用1.2.1 安装 vue-router插件1.2.2 应用 vue-router插件1.2.3 编写相关组件1.2.4 编写router入口文件1.2.5 编写应用的根组件1.3 几个注意点1.3.1 相关API（路由对象属性）2、多级路由2.1 编写相关组件2.1.1 一般组件2.1.2 路由组件2.2 编写路由入口文件2.3 编写应用的根组件2.4 编写应用的主入口文件3、路由的query参数3.1 基本使用3.2 示例编写相关
Vue3添加动态路由及项目搭建
Miketutu的博客
05-17 2680
Vue3添加动态路由
vue3.0路由配置
03-04
### Vue 3.0 中的路由配置 #### 创建 Vue Router 实例 为了在 Vue 3.0 应用程序中设置路由，首先需要安装 `vue-router`。可以通过 npm 或 yarn 来完成这一步骤。 ```bash npm install vue-router@next ``` 接着，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值