vue2路由创建和封装

已于 2023-07-17 14:53:07 修改
阅读量157 收藏
点赞数
文章标签： 前端 javascript 开发语言
于 2023-07-17 14:36:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lan2536198456/article/details/131765566
版权

         先将首页路由放置router文件index.js

第二 创建路由子模块modules 创建子路由.js文件，页面引入首页配置默认一级路由

 import 引入相对vue页面

 

 第三 在router文件的index.js 引入子路由和注册使用

 import 后的变量名进行注册  按照顺序在页面排放位置

lan2536198456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
详解给Vue2路由导航钩子和axios拦截器做个封装
11-30
1.写在前面 最近在学习Vue2，遇到有些页面请求数据需要用户登录权限、服务器响应不符预期的问题，但是总不能每个页面都做单独处理吧，于是想到axios提供了拦截器这个好东西，再于是就出现了本文。 2.具体需求 用户鉴权与重定向：使用Vue提供的路由导航钩子 请求数据序列化：使用axios提供的请求拦截器 接口报错信息处理：使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js，这里是部分代码 import Vue from 'vue' import Router from 'vue-rout
路由权限之动态路由(VUE2)
m0_61417250的博客
01-15 2880
通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到动态路由的设置了,所以 这是我们需要用到我们的动态路由来解决问题 一、从接口获取菜单、路由 登录了，登录人的信息会传给后台，后台就会判断，这个登录的人是什么角色，这个角色有什么权限或者说路由、菜单数据。 这里采用的mock进行的后台数据的模拟 mock里面的数据格式 export default [ { name:'Home',tilte: '首页', icon: 'el-icon-s-
vue2前端基础路由封装（无前置/后置路由守卫）
最新发布
Xiang_Gong_Ya_的博客
08-25 198
【代码】vue前端基础路由封装（无前置/后置路由守卫）
vue2的动态路由
XL984507092的博客
08-01 227
【代码】vue2的动态路由。
Vue【八】路由vue-router的封装
小祥编程擅长前端
11-23 1186
Vue【八】路由vue-router的封装。把路由配置都写在main.js中会显的特别乱，小项目还好，大项目就会看的眼花缭乱，因此，在开发中常把路由单独封装起来，然后再main.js中导入。
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
vue自定义指令和动态路由实现权限控制
11-19
2. **动态路由**：在Vue中，动态路由是指能够根据不同的参数生成不同的页面。在`src/router/index.js`中，我们会看到两个部分，`constantRoutes`是静态路由，这些路由是应用中固定不变的部分，而`asyncRoutes`则是...
vue2 对路由控制以及axios请求响应的封装
han_xiao_xiao的博客
08-16 284
axios的request.js封装
Vue2 --文本框组件封装、路由封装、路由跳转
weixin_51972964的博客
12-18 281
文本框封装 实现子父组件值双向绑定 子组件通过$emit把input框监听到的值发送给父组件 //子组件 <div> <input @input="handleInput" class="myInput" type="text" placeholder="请输入用户名/手机号" :value="value" /> </div> <script> export default {
vue2.x与3.x路由简介及简单封装
前端御书房
07-28 378
路由 什么是路由 后端路由：对于普通的网站，每个页面的链接都是url地址，所有的url地址都对应服务器上的资源 前端路由：通过url的hash（#号）来实现不同的页面间的跳转 安装 下载链接 在vue.js后面链接vue-router.js npm安装 npm install vue-router 创建路由 路由传参 通过query方式参，在to属性中用?后面接要传入的属性名和属性值 <router-link to="/login?id=10">登录</router-link&
vue2接口的封装
weixin_53935634的博客
02-17 5132
1.配置完成router后 ，可以在router内新建request.js文件 import axios from 'axios' import { MessageBox, Message } from 'element-ui' // import store from '@/store' // import { getToken } from '@/utils/auth' //创建axios 实例 const service = axios.create({ // baseURL..
Vue2路由的详细讲解
热门推荐
zxdznyy的博客
10-22 1万+
在之前的原生学习中，一个项目通常会有一个主页，index.html，以及很多个分页。想要通过主页去往其它页面，大部分情况我们使用链接a标签。但是在vue中，vue大多开发单页面应用，也就是SPA项目，倘若想要在SPA项目中看到多个组件，则需要凭借路由。本篇博客就针对路由进行全面讲解，希望对大家有帮助！前面四节讲述的是如何用router-link来渲染组件，这种方式叫做声明式导航，在浏览器中，点击链接实现导航的方式，叫做声明式导航。而编程式导航，则是调用API方法进行导航。
Vue route 封装
qq_29744347的博客
05-03 1335
文章目录vue版本安装 vue-router封装使用路由App.vue 修改page/home.vue访问路由嵌套 vue版本 vue3 安装 vue-router cnpm install vue-router 封装 这里将路由文件独立(创建router.js) 引入createRouter 创建router方法 定义路由 导出创建router方法，这个方法需要传入router 的 history history 可以通过vue-router 中的 createWebHistory方法创建 # ro
vue路由的封装与使用
scclp的博客
11-30 3599
封装路由首先要明确的是业务需求，以及路由的基本原理 下面从几个点进行阐述： 1.关于路由的目录结构 router index.is routes is index.js文件里面存放的是关于路由的一些基本配置 index.js import Vue from 'vue' import VueRouter from "vue-router" import routes from '/routes' Vue.use(VueRouter) //......
Vue动态路由生成多级菜单函数封装
Moke的博客
04-15 867
动态路由生成 后端请求到的接口里面的菜单根据pid产生多级联动；以下的代码将会自动生成vue里面的路由结构 调用 Tree（菜单数据） 定制化修改函数 generator（） currentRouter 这个里面可以定制化修改所需要的path、meta、component等 代码如下： /** * * @param {*} option * @returns menus菜单数据 数组 */ export function Three(option) { let resNa
Vue基础整理之路由二次封装
weixin_45966674的博客
05-02 3334
Vue路由的坑我可是踩了不少，那么我们就来看看小萌新的路由二次封装吧 封装路由首先我们要引入vue的路由 npm install vue-router save 之后我们创建router.js 编写代码在router.js中编写 import Vue from 'vue' import routes from './routes' import Router from 'vue-router' Vue.use(Router) const router = new Router({ mode: 'hi
Vue2移动端项目总结（配置2级路由，封装网络请求等）
qq_52130952的博客
08-18 1536
新手做第一个vue项目的经验总结
vue3 路由守卫封装
08-17
为了封装Vue3的路由守卫，你可以按照以下步骤进行操作： 1. 在Vue3项目中引入Vue-router4.0版本。 2. 创建一个新的文件，例如"router.js"，用于存放路由相关的代码。 3. 在"router.js"中，使用`createRouter`函数...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值