Vue2 前端路由

已于 2023-06-12 00:46:53 修改
阅读量787 收藏
点赞数
文章标签： 前端 vue.js javascript
于 2023-06-07 15:13:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52731478/article/details/131086335
版权

SPA

单页面应用
只有一个页面（一个html文件）

vue-router

组件之间的切换（hash地址与组件间的关系）–前端路由

vue版本与路由版本的对应关系

vue2->router@3
vue3->router@4

入门

用vue脚手架创建只有babel组件的vue项目

进入项目
//安装路由
npm i vue-router@3.5.2

目录结构

在这里插入图片描述

1.创建pages文件夹，文件夹内创建一级路由

Home.vue
在这里插入图片描述
About.vue
在这里插入图片描述
Product.vue （声明式导航）
在这里插入图片描述

2.在pages文件夹内创建products文件夹作为保存一级路由porduct的子路由（二级路由）页面，并在该文件夹内创建二级路由页面

huawei.vue
在这里插入图片描述
xiaomi.vue
在这里插入图片描述

3.在src文件夹下创建router文件夹，并在该文件夹内创建index.js，作为路由文件

在这里插入图片描述

4.在入口文件内挂载路由

在这里插入图片描述

5.在App.vue内引用路由

在这里插入图片描述

脚手架创建路由

在这里插入图片描述
选择路由是否为history模式
在这里插入图片描述

路由懒加载

/router/index.js (路由文件)
在这里插入图片描述
@路径指示符修改
jsconfig.json
在这里插入图片描述

前置路由守卫

监听路由跳转，对路由跳转前进行操作（拦截或者允许跳转）可以与token连用。
/router/index.js (路由文件)
在这里插入图片描述

meta为固定字段，不能随便命名

后置路由守卫

跳转后对页面进行操作（改变某个板块字体样式等等）
/router/index.js (路由文件)
在这里插入图片描述

路由跳转与回退

路由跳转分两种模式$router.push(路由)与$router.replace(路由)
push方法记录了浏览器读取路由的历史，能通过回退前进等操作读取上一次所使用过的路由。
在这里插入图片描述

视图命名

一个组件如果同时存在多个视图，该如何分辨对应子组件渲染到对应视图上呢？

路由文件
在这里插入图片描述
组件
在这里插入图片描述

需要注意：子组件需要设置name，比如下面的组件就为NavAboutView.vue 文件的内容
在这里插入图片描述

缓存路由组件

路由文件
在这里插入图片描述
组件
在这里插入图片描述
navs1组件
在这里插入图片描述
navs2组件
在这里插入图片描述

以上，如果路由上组件设置了name，那组件文件可以不用设置name，反之亦然，不过总而言之，不过name设置在哪里，组件对应的name不可或缺

当然，我们也可以设置路由的meta.keepAlive字段来设定当前组件是否被缓存
以下是只有navs1被缓存
在这里插入图片描述

路由发送数据

路由
在这里插入图片描述

query Url形式

组件发送数据
在这里插入图片描述
组件接收数据
在这里插入图片描述

query 对象形式

组件发送数据
在这里插入图片描述
组件接收数据
在这里插入图片描述
路由
在这里插入图片描述

params Url形式

组件发送数据
在这里插入图片描述

组件接收数据
在这里插入图片描述

params 对象形式

组件发送数据
在这里插入图片描述
组件接收数据
在这里插入图片描述

布织锁云
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-2 路由
qq_17368835的博客
07-08 209
本系列记录一些vue学习中的心得
Vue2中的路由
Will_Season的博客
01-06 262
使用webstorm创建vue2脚手架回车选择第三项空格取消babel和Linter取消后回车进行下一步骤等待程序安装,出现以下文件显示安装成功点击按钮运行后出现端口地址点击端口地址出现该页面表明成功创建了vue2脚手架脚手架创建成功后在Terminal中安装vue-router文件: npm install vue-router@3@3表明是在vue-router3中的最后一次更新的版本,可在package.json中查看该文件版本号。
Vue2 路由
03-07 642
vue-router 2.0 改变的内容 原文 https://segmentfault.com/a/1190000006623100 主题 软件开发 2.x 版本的 vue-router 相比之前的0.7.x版本，有很多破坏性改变：通用 API 的修改The old router.go() is now router.push() .新的 router.go 类似 window.histo
2022/9/21 记录VUE2.X的路由挂载
weixin_54534229的博客
09-21 228
VUE2.X的路由挂载方法
vue2项目的路由
m0_69889435的博客
08-10 726
vue2项目的路由使用
vue2路由基本用法实例分析
11-20
本文实例讲述了vue2路由基本用法。分享给大家供大家参考，具体如下： Vue-router 是给Vue.js 提供路由管理的插件，利用hash 的变化控制动态组件的切换。以往页面间跳转都由后端MVC 中Controller 层控制，通过<a> ...
前端vue2智慧商城项目
最新发布
10-23
【Vue2智慧商城项目】是一个基于Vue.js框架的前端应用，使用了Vue2的核心特性以及相关的生态工具，如Vuex状态管理库、Vue-Router路由管理和Element-UI组件库，来构建一个完整的网上购物平台。这个项目展示了Vue2在...
Vue2+Vue3前端框架全套视频.zip
02-24
这套 "Vue2+Vue3前端框架全套视频" 可能涵盖了从基础到高级的Vue知识，包括如何创建项目、组件设计、状态管理（Vuex）、路由（Vue Router）、异步数据处理、性能优化以及从Vue2向Vue3迁移的策略等内容。通过学习这些...
vue前端路由的学习
08-10
在“vue前端路由的学习”中，我们将深入探讨 Vue Router 的核心概念和实践技巧。 1. **安装和配置 Vue Router** 在开始之前，需要确保已经安装了 Vue.js。然后，可以通过 npm 或 yarn 安装 Vue Router： ``` npm...
vue前端开发实战PPT
01-25
Vue前端开发实战PPT系列涵盖了从基础到高级的Vue开发技能，旨在帮助开发者提升项目实战能力。 首先，从标题和描述我们可以看出，这个系列主要关注Vue的实际应用，通过一系列的PPT教程来教授开发人员如何有效地使用...
Vue-Router2.X多种路由实现方式总结
01-21
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router 一、使用路由 在main.js中，需要明确安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) 1.定义组件，这里使用从其他文件import进来 import index from './components/inde
vue-mix-pages：基于vue2的多页+单页混合应用框架
02-05
项目结构 │ ├─build /* webpack的配置目录 */ │ ├─config.js /* 公共常量，用于配置文件 */ │ ├─utils.js /* 工具函数，用于配置文件 */ │ ├─webpack.base.conf.js /* 公共配置文件 */ │ ├─webpack.dev.conf.js /* 开发环境配置文件 */ │ └─webpack.prod.conf.js
Vue CLI3基础学习之pages构建多页应用
10-16
主要给大家介绍了关于Vue CLI3基础学习之pages构建多页应用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue CLI3具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue2.x+qiankun微前端使用说明
qq_37759901的博客
05-10 172
应用：构建微前端架构系统，主应用、子应用独立开发、独立部署，主应用如：TF18标准化，子应用如：八星、绿梅定制化开发。(3) 配置子应用显示区域(MainContent.vue)(4) 子应用路由配置，在主应用菜单管理中添加。开发时需要同时启动两个项目，两个项目同时部署。全局配置，返回八星或者绿梅的子应用访问路由。(3) 配置router.js。Qiankun库应用使用说明。(2) 配置main.js。
微前端qiankun架构 (基于vue2实现)使用教程
站在巨人的肩膀上前行
02-11 3800
在 utils 内创建 微应用文件夹 microApp,同时在该文件夹内创建微应用出口文件 index.js,路由文件 microAppRouter,配置函数文件 microAppSetting。在main.js文件内引入微应用出口文件 index.js。使用vue脚手架创建主应用main和子应用dev。在App.vue内配置微应用容器及跳转菜单。创建文件夹qiankun-test。微应用出口文件 index.js。配置Webpack、跨域与端口号。路由文件router.js。路由文件router.js。
Vue2路由使用方法及配置
weixin_63877292的博客
04-23 788
vue2的main代码和路由介绍
qiankun 部署微前端-vue2（一）
12-12 2173
qiankun实现微前端部署
基于vue2的qiankun使用步骤(主、子应用都是vue2)
m0_67556466的博客
05-04 2121
解决方案：子应用main.js文件导入public-path.js时写在所有导入语句的最前面即可。主应用入口文件main.js中不需要调用start()方法。修改主应用中需要加载子应用的路由规则（routes）子应用的activeRule需要加上上述路由规则。主应用中加载子应用的页面中调用start方法。
Vue2实现动态路由配置
qq_30907143的博客
09-09 9480
关于动态路由有前端实现和后端直接根据登录用户权限返回对应路由表两种方式实现，这里所讲的是偏前端方式实现（根据登录后后端返回用户roles字段进行身份判断）
vue3 前端路由限制
06-09
Vue3 前端路由限制可以通过导航守卫来实现。导航守卫分为全局守卫和路由守卫两种： 1. 全局守卫：beforeEach、afterEach、beforeResolve。 这些全局守卫可以在跳转路由前、跳转路由后、跳转路由前解析异步路由时进行限制。可以在全局守卫中对用户身份、权限、路由跳转目标等进行判断，如果不符合条件，可以中断路由跳转或者跳转到其他路由。 2. 路由守卫：beforeEnter、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。 这些路由守卫可以在跳转到指定路由前、路由组件加载前、路由组件更新前、路由组件离开前进行限制。可以在路由守卫中对用户身份、权限、路由跳转目标等进行判断，如果不符合条件，可以中断路由跳转或者跳转到其他路由。 在Vue3中，可以通过路由配置中的meta字段来进行路由限制的配置，例如： ```javascript const routes = [ { path: '/admin', component: Admin, meta: { requiresAuth: true } } ] ``` 在路由守卫中可以通过to.meta.requiresAuth来获取路由限制配置信息，进行相应的判断和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值