Vue-router 第6页

node 第二十天手写SPA前端路由，vue-router实现原理

前言本章和node的关系不大，不过的确是服务端开发的必备前端知识。路由经历了不同的发展阶段后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，

飞衡、如日之升·2024-01-13 02:25

vue重复点击路由报错

Avoidedredundantnavigationtocurrentlocation:'/xxx可以通过在main.js或路由配置文件（index.js）中重写push的方法，解决该问题importVueRouterfrom'vue-router'constoriginalPush

煸橙干儿~~·2024-01-13 00:42

VS CODE之vue.js基本知识一

vscode建项目布置切换使用语言：搜索框直接搜索该语言的英文，点击安装即可文件目录管理：设置颜色主题：一些通用操作：推荐安装的插件Vue.js项目技术栈Vue.js,Vue-Router,webpack

w??oo.·2024-01-12 19:54

vue-router 动态的改变title的值

最近在开发手机端项目的时候，需要对页面的titel进行动态的配置。主要是采用路由守卫的方法进行动态的改变，具体方法如下：1.meta数据配置将每个页面的title都写router中的meta中来统一维护。//router.js文件{path:'/waybillHistory',name:'waybillHistory',meta:{title:'历史记录'},component:()=>impor

bayi_lzp·2024-01-12 19:47

vue3项目部署到服务器，刚打开没事，一刷新页面就404

百度了下才发现问题所在问题所在：vue-router历史模式的问题：vue3中历史模式，默认改为了HTML5模式：createWebHistory()解决办法：createWebHistory换成createWe

一嘴一个橘子·2024-01-12 18:58

Vue基础-搭建Vue运行环境

包括node.js安装和配置、安装Vue及VueCLI工具、安装webpack模板、安装vue-router、创建Vue项目等步骤。

Damon小智·2024-01-12 07:32

vue-router处理刷新query参数消失问题

概念-路由对象属性$route.query一个key/value对象，表示URL查询参数。$route.path字符串，对应当前路由的路径$route.fullPath完成解析后的URL，包含查询参数和hash的完整路径。分析当浏览器刷新时，触发导航守卫beforeEach方法等，只有在next(path:to.path)时改变了路由参数解决方案将next(path:to.path)修改为next

梓喻·2024-01-12 04:27

Vue3：返回组件（运用keepAlive保留滚动位置）

keepAlive，实现返回保留滚动条位置router.js注:需要保留滚动条的页设置keepAlive:trueimport{createRouter,createWebHashHistory}from'vue-router'constroutes

米柆·2024-01-12 02:29

VUE购物车商品的添加、删除和计算总金额功能

{{getSum()}}import{reactive,toRefs,onBeforeMount,onMounted}from"vue";import{useRouter,useRoute}from"vue-router

小阳生煎·2024-01-11 19:31

beforeEach导航守卫

导航守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。

笑该动人d·2024-01-11 14:36

使用 Vue 3 实现基于身份的权限验证

1:首先，你需要在Vue项目中安装vue-router和vuex（用于状态管理）：npminstallvue-routervuex2:创建一个路由配置文件router.js，并配置你的路由规则和权限需要验证的路由

星空,二脚·2024-01-11 10:46

vue 实现动态路由

vue-router对象中的addRoutes，用它来动态添加路由配置格式：router.addRoutes([路由配置对象])this.

前端~·2024-01-11 10:15

前端卡卡西·2024-01-11 05:44

vue3-elementplus 后台管理系统的Layout布局

1.采用elementplus中container布局容器2.router.js中进行配置路由import{createRouter,createWebHistory,}from"vue-router"

前端阿槑·2024-01-11 01:29

Vue组件：Vue Router以及路由守卫，含路由的基本使用，配置，路由传参，导航方式，缓存；路由守卫的三种用法

点击页面的导航链接时，不会刷新页面，只会局部更新基础使用使用步骤:安装vue-router，命令[email protected]在src同级目录下创建router目录，并创建路由的js配置文件,

CodeMonkey-D·2024-01-11 00:12

前端基础vue路由懒加载

使用常用的懒加载方式有两种：即使用vue异步组件和ES中的import（及require.ensure）1、未用懒加载，vue中路由代码如下importVuefrom'vue'importRouterfrom'vue-router

码路老默007·2024-01-10 22:39

Vue文件夹目录结构

*node_modules：项目所有依赖的包文件，比如vue-router、vuex等插件都会下载到这个文件夹里面*public：本地服务器的文件夹（其实是访问里面的index.html）*favi

为了_理想·2024-01-10 11:47

nginx 二级目录部署vue项目

主要是vue项目得更改资源路径通过.env环境变量来设置修改项目的基础路径，我的是vite项目，所以我要在vite.config.js中修改base属性为‘/threejs/’修改vue-router的

goms·2024-01-10 07:57

切换Tab页面不重复刷新页面/请求数据问题

需用到的点：Vue中的keepAlive内置组件+vue-router中的配置问题一、内置组件----keepAlive内部缓存机制钩子函数（生命周期）activated和deactivated二、name

Vamp_Piece·2024-01-10 03:51

vue3新建项目，配置路由vue-router，引入element-plus

提示：vue3依赖18.0或更高版本的Node.js文章目录前言一、创建项目二、安装ElementPlus并引入三、配置路由跳转四、效果五、参考文档总结前言需求：新建一个vue3项目，配置路由，引入elementUI一、创建项目1、查看nodejs版本node-v2、新建vue3项目npmcreatevue@latest创建选项除了，是否引入VueRouter进行单页面应用开发？选择是，其他均选择

longlongago~~·2024-01-09 20:54

vue3 +TS 安装使用router路由模块

nextnpminstall@types/vue-router2.router目录创建在src目录下创建/src/router文件夹包含两个文件route.tsimport{RouteRecordRaw}from'vue-router'constroutes

程序猿online·2024-01-09 19:12

浪花 - 前端路由整合详细步骤

1.引入vue-router的js库npminstallvue-router@42.从其他文件导入路由组件importIndexfrom"@/pages/Index.vue";importTeamfrom

m0_74059961·2024-01-09 19:08

Vue动态组件 & keep-alive

前言在vue中，实现Tab切换主要有三种方式：使用动态组件，使用vue-router路由，使用第三方插件。本文将详细介绍Vue动态组件。所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。

dingFY·2024-01-09 06:22

Vue3---安装路由

：执行npm命令安装路由npminstallvue-router@4第二步：在项目的src文件夹下创建router子文件夹第三步：创建index.js和routes.js文件，以下为文件的代码//通过vue-router

牧小七·2024-01-09 04:25

vue3配置项目路由

1.一级路由切换原则，页面整体切换一级路由2.先创建一级路由对应的组件3.router/index.jsimport{createRouter,createWebHistory}from'vue-router

越来越好的月·2024-01-09 03:04

vue3使用router + axios

npminstallvue-router@4@4是版本号也可以@5等有的以上版本2、创建router相关js文件并写入类容import{createRouter,createWebHistory}from'vue-router'constrouter

呵呵哒·2024-01-09 01:26

前端效果登入界面

'}}{{'跳过'}}{{'跳过登入进入'}}登入登入import{ref,reactive,onMounted,onUnmounted}from'vue'import{useRouter}from'vue-router'importNProgressfrom'nprogress'import'nprogress

Bigcrab__·2024-01-08 15:57

vue3.0记录滚动位置的两种方法

onActivated才能将滚动位置缓存起来每次进入都要将存储的位置重新赋值给页面路由守卫beforeRouteLeave路由离开前记录当前的位置import{onBeforeRouteLeave}from'vue-router'constscrollRef

Smile_zxx·2024-01-08 13:54

Vue学习计划-Vue3--核心语法（六）路由

1.路由【对路由的理解】【基本切换效果】Vue3中要使用vue-router的最新版本，目前是4版本路由配置文件代码如下：//创建一个路由器，并暴露出去//第一步：引入createRouterimport

化作繁星·2024-01-08 10:40

遇到 Loading chunk {n} failed问题不要慌

前言最近在写个vue的demo,调试过程中出现个问题,vconsole中提示[vue-router]Failedtoresolveasynccomponentdefault:Error:Loadingchunk10failed

w候人兮猗·2024-01-08 02:27

Vue路由（Vue-router）

1.1路由2.前端路由概念：根据不同的用户事件，显示不同的页面内容本质：用户事件与事件处理函数之间的对应关系3.实现简易前端路由基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）VueRouter（官网：https://router.vuejs.org/zh/）是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA应

LetKing·2024-01-07 22:34

[VUE]3-路由

目录路由Vue-Router1、Vue-Router介绍2、路由配置3、嵌套路由3.1、简介3.2、实现步骤3.3、⭐注意事项4、⭐router-view标签详解作者介绍：双非本科大三网络工程专业在读，

逐梦苍穹·2024-01-07 22:41

04-vue-cli-启动配置和静态资源配置

端口号，浏览器启动配置，如下图2.导入hello组件的方式：#hello.vuehello//js代码/*样式*/#index.jsimportVuefrom'vue'importRouterfrom'vue-router

喜乐L·2024-01-07 21:17

vue-cli配置静态路由(vue-router)

分三部完成涉及文件:router目录下index.js和staticRouter.js,以及入口文件main.js一:staticRouters.js中代码如下:为了方便管理,静态路由的配置在单独文件管理//引入组件写法一:constindex=()=>{returnimport('./../components/index')}//引入组件写法二://constindex=function(){

这世界反了·2024-01-07 21:46

vue3+vite配置静态路由

1.安装路由npminstallvue-router--save2.新建router/index.js文件文件内容import{createRouter,createWebHistory}from'vue-router'importHomefrom

在线小白www·2024-01-07 21:44

Vue3中router的基本配置以及使用

第一步：安装router---->官方文档第二步：创建文件夹router，并创建一个index.js文件第三步：进行index.js的相关配置//以前vue2是//importRouterfrom'vue-router

Tea-pd·2024-01-07 21:44

Vue3中如何安装和配置静态路由

静态路由就是不管哪个用户都会有的路由页面，比如，登陆页面，主页面，404页面，以及如果匹配到没有的路由重定向到404的配置）import{createRouter,createWebHashHistory}from'vue-router'let

EntyIU·2024-01-07 21:38

uni-app运行环境判断、uView组件库、跨域问题、首页骨架屏

所以uni-app的路由用法与VueRouter不同，如仍希望采用VueRouter方式管理路由，可在插件市场搜索Vue-Router。

爱敲代码的狼仔·2024-01-07 20:40

首屏加载优化有哪些方案？

Vue-Router路由懒加载（利用Webpack的代码切割）使用CDN加速，将通用的库从vendor进行抽离Nginx的gzip压缩Vue异步组件服务端渲染SSR如果使用了一些UI库，采用按需加载Webpack

Virgil_x·2024-01-07 06:52

Vue3-40-路由- 动态路由

针对上述四个方面，vue-router中提供了对应的API，因此，本文将主要介绍对应的API及其使用方法。API说明注意：以下API都是全局路由配置对象的方法！

NorthCastle·2024-01-06 22:33

【前端】[vue3] vue-router使用

安装vue-router：（注意：vue2引用vue-router@3vue3才引用vue-router@4）npminstallvue-router@4src文件夹下面创建router/index.ts

timeguys·2024-01-06 20:26

Vue 路由

在Vue.js中使用路由，需要先安装vue-router插件，并在项目中引入该插件。然后，我们可以通过定义路由表来配置页面之间的路由关系。

代码真的养发·2024-01-05 22:56

vue项目 index.html 引入静态资源，刷新页面问题。

此时vue-router的路由模式(mode)是history模式。上图是刚进页面的时候请求静态文件，静态文件的指向是正确的。上面是在当前页面刷新一下出现的问题，提示引入的静态资源找不到。

年年CODE·2024-01-05 19:38

vue3安装路由（router）

如下：//[email protected]安装完成后，可在package.json中查看vue-router是

前端小趴菜05·2024-01-05 18:28

Vue知识总结-上

Vue是一套用于构建用户界面的渐进式(由只需要轻量小巧的核心库构建的简单应用逐渐扩展为可以引入各式各样的Vue组件构建的复杂应用)JavaScript框架Vue需掌握的内容：Vue基础、Vue-cli、vue-router

奉先节度使·2024-01-05 13:34

Vue: Element-UI登录页面与vue-router使用

Element-UI，一套基于Vue2.0的桌面端组件库官网连接VueRouter模块化编程机制实现vue框架应用的页面跳转1.搭建环境(前提准备好vue所需环境)初始化webpackvue项目vueinitwebpackhello-vue-element为当前项目安装路由支持npminstallvue-router--save-dev安装elementUI依赖npmielement-ui-S安装

掌灬纹·2024-01-05 11:33

【springboot+vue前后端分离的项目（六）】引入vue-router实现网页（路由组件、非路由组件）跳转

目录目录一、知识点总结（一）项目源码目录设计（二）Vue项目：从页面跳转和数据获取划分（三）页面跳转分为路由组件与非路由组件的跳转二、使用vue-router实现路由组件的搭建1、安装vue-router2

幸福巡礼·2024-01-05 08:15

vue打包后vue-router无内容

环境：“vue”:“^3.3.4”,“vue-router”:“4.2.1”问题：在使用了createWebHistory创建路由时，发现打包后页面空白，也无报错信息解决办法：第一种方法：将路由模式改成

goms·2024-01-05 01:59

Vue3-34-路由-路由配置参数 props

基本的代码如下：import{useRoute}from'vue-router';constcurrentRoute=useRoute()//获取对应的路径参数consol

NorthCastle·2024-01-05 01:03

vue3中当路由一样，参数quary不一样的跳转页面不刷新问题

import{useRoute}from'vue-router'setup()

jojo是只猫·2024-01-04 13:04

推荐频道

Vue-router

node 第二十天 手写SPA前端路由，vue-router实现原理