vue-router是什么
路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。（传统页面切换是用超链接a标签进行切换）##### ...
2024-01-10
vue-router 基础
安装NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)如果使用全局的 script 标签，则无须如此（手动安装）。开始用Vue.js+vue-router创建单页应用，是非常简单的。使用Vue.js,我们已...
2024-01-10
vue-resource使用笔记
基本语法//基于全局Vue对象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); //在一个Vue实例内使用$httpthis.$http.get('/someUrl', [options]).then(successCallback, e...
2024-01-10
vue-router 动态修改路由参数
路由地址后缀 /test?regionId=sj用户信息中有匹配的行政区划权限数组 xzqh: ['sj','hz'], 且有字段表示改用户默认归属的行政区划 regionId: sj当手动修改地址改成 /test?regionId=hz，因为 regionId 在符合的权限数组中，跳转到 /test?regionId=hz当手动修改地址改成 /test?regionId=nb，重定向地址到 /t...
2024-03-09
vue-router 传递参数的几种方式
本文转载自：https://blog.csdn.net/crazywoniu/article/details/80942642vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 <router-link>编程式导航传递参数有两种类型：字符串、对象。字符串字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：this.$router.push(...
2024-01-10
多个router-view无法同时显示
<!DOCTYPE html><html> <head> <title>My Eighth Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <script src="https://unpkg....
2024-03-13
vue-worker的介绍和使用
vue-worker把复杂的web worker封装起来，提供一套非常简明的api接口，使用的时候可以说像不接触worker一样方便。那么具体怎么使用呢？安装npm i -S vue-worker注册import Vue from 'vue'import VueWorker from 'vue-worker'import App from 'App.vue'Vue.use(VueWorker)new Vue({ el: '#app', render: h => h(App) })注册之后，你可以像th...
2024-01-10
Vue-vue-router.js路由－－进级
正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。全局钩子你可以使用 router.beforeEach 注册一个全局的 before 钩子：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ......
2024-01-10
Vue.js路由vue-router使用方法详解
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切...
2024-01-10
Vue-Router的routes配置详解
目录介绍routes中对象属性path: stringcomponent : Component | () => import(组件)name: stringredirect： string | Location | Functionprops: boolean | Object | Functionalias: string| Array[string]children?: Array[RouteConfig]beforeEnter: (to: Route, from: Route, next: Fun...
2024-01-10
vue--vuex详解
Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 为什么要用Vue...
2024-01-10
vue+vue-router 打包后遇到的一系问题
写完项目（ vue-cli ）直接 npm run build 之后，生成了一个dist 文件夹，里面有一个index.html和一个static文件夹，把dist文件夹放在我的wamp的www目录下，然后访问127.0.0.1/dist/，发现如下问题1.访问index.html文件没有内容，检查发现是因为index文件里的css和js路径有错 解决方法：修改源码config文件夹下的index.js ,...
2024-01-10
vue grammer one
本文所有内容均来自 书籍《vue.js实战》完整代码仓库见仓库v-model<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Hello world</title></head><body> <div id="app"> <input type="text" v-model="name" placeholder="your name"> <h1>Hello,{{ name }}</h1> </div> <script src="https...
2024-01-10
vue2.0 - vue-router滚动条返回顶部
header是固定的，点击左边导航栏切换页面，使右边页面滚动条在顶部 各位大佬应该怎么实现回答：刚才也是遇到这样一样的问题就写了个全局的函数Vue.prototype.upToTop = function() { let dom = document.getElementById('main-content'); dom.scrollTop = 0;}main-content是我的页面的主体部分的标签id我在每次页...
2024-01-10
Vue使用日记（21）：vue-router详解（2）
之前使用router-link的to属性进行路由跳转，现在使用另一种方式进行跳转：使用代码的方式进行跳转。vue-router源码内部定义了一个对象：$router，其实就是一开始使用vue-router时创建的路由实例对象，这个对象在任意一个组件内都可以使用，所以可以调用它的push和replace方法进行路由跳转：说明：push和rep...
2024-01-10
vue.js多个view-router为什么无法显示？
小白尝试在组件MainUI内弄两个个view-router，是不是加上name属性就可以了？但是它是不显示，如果是单个的不加name属性是正常显示的，请问大哥们我哪里写错了?这是路由const routes = [ { path: "/", component: MainUI, children: [ { path: "", ...
2024-02-25解决vue-router 二级导航默认选中某一选项的问题
现在有一个需求是这样的：这个需求很正常吧！ 二级导航条，不是二级路由的（如果是二级路由是用linkActiveClass来做，我之前文章说过），是单纯获取数据的按钮，当这个页面出现时，默认选中第一项。首先：上面的判断的意思是：如果你点击某一个选项把这个index传过去，activeName等于那一个传...
2024-01-10vue el-from校验成功但是 return不管用？
async handleSubmit() { const flag = await this.$refs.form.validate().catch((e) => e) if (!flag) return this.loading = true try { await queryVipStandardEdit({ ...
2024-03-01
ztree在vue下的实战
此文章用来记录自己项目中觉得有用的插件，勿喷使用main.js需配置import "./../static/ztree/js/jquery.ztree.core.js";import "./../static/ztree/js/jquery.ztree.excheck.js";import "./../static/ztree/js/jquery.ztree.exedit.js";import './../static/ztree/css/tree/metroStyle/metroStyle.css'<di...
2024-01-10
perfect-scrollbar在vue中的使用
1.下载perfect-scrollbar依赖包1）直接下载依赖包及包含css样式和js2. 然后去查看package.json中是否有此目录，有=》OK ，没有需要添加 ，方便管理依赖避免丢失。3.perfect-scrollbar的使用1）引入 2)html中包裹所滑动的元素3）设置img-scrollbox的样式 =》出现传统滚动条说明：样式按自己需求自己调4）计...
2024-01-10关于vue 路由 vue-router中嵌套路由中无限嵌套？
在用vue仿写B站的组件切换效果。效果：iphone上B站App中，从B站app首页点击一个视频，进入【视频播放页】，点击【视频播放页】中up主的头像，进入【up主的主页】，然后点击【up主的主页】中的视频，又显示【视频播放页】，然后就可以在【视频播放页】 ⇆ 【up主的主页】之间无限的进行下去。显示新页面时并没有覆盖前面已显示的页面，而是从右侧滑动显示盖在当前页面上。因此我最初是写成嵌套路由ro...
2024-03-03
Vue-认识状态管理vuex
vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试，可以多个组件共享状态。简单来说，就是共享的状态用state来存放，用mutations来操作state，但是需要用store.commit来主动式的操作mutations。 用一个简单的demo来认识vuex。 注意在使用vuex之前要先安装依赖（前提是已经...
2024-01-10Vue-router 类似Vuex实现组件化开发的示例
本文介绍了Vue-router 类似Vuex实现组件化开发的示例，分享给大家，具体如下：随着项目越来越大，把所有route写在一个文件里就显得杂乱。#单个组件路由import a from '../components/a'export default { path: '/a', name: 'a', component: a}import arouter from 'xxx'export default new Router({ routes: [ arouter ]})#多个组件路由...
2024-01-10
Vue学习笔记十二：vue-resource的基本使用
目录HTML浏览器效果Vue不提倡使用操作DOM，所以Jquery不使用了，ajax也不使用了。所以，Vue给我们提供了一种和ajax差不多功能的指令，vue-resourceHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
2024-01-10vue-scroller记录滚动位置的示例代码
问题描述:列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置解决问题思路:切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.还有一种更简单粗暴的方法， vue-scroller.min.js源码中添加宽高不...
2024-01-10
