vue-router总结2
在上一篇总结了vue-router中的路由切换、重定向和路由传参等知识，因为篇幅的原因，便将剩下的路由模块化、路由嵌套、history模式、路由守卫等放在这里来写了。因为是继续前面的写。所以代码也还是用的前面的，有需要的可以自己去上一篇的最后下载。新窗口打开在vue中，路由跳转有两种模式，...
2024-01-10
vue-router 去掉#
注：假设你的项目访问地址为 http://www.a.com/test vue-router默认的路由模式是hash，我们要去掉url中的#需要将路由模式切换为historyconst router = new VueRouter({ base: 'test', // 如果项目项目在 域名 根据目录下，则去掉这行 mode: 'history', ...}) 这样子，url中的#就可以去掉了，在开发环境下不会出...
2024-01-10
vue-router路由组件的使用
今天我们来学习vue-router路由插件的使用，先来了解一下什么是vue-router。由于 Vue.js 是一个视图层框架，并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含页面的跳转以及通信功能，而是使用vue-router路由插件（页面跳转）和axios（通信）实现的。在前后端分离的模式下，原本由...
2024-01-10
Vue-Router(一)
Vue-Router(一)简介vue-router是Vuejs的官方推荐路由，让用 Vue.js 构建单页应用变得非常容易。目前Vue路由最新的版本是4.x版本。vue-router是基于路由和组件的路由用于设定访问路径, 将路径和组件映射起来.在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.安装npm install vue-router@4使用步骤...
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 传递参数的几种方式
本文转载自：https://blog.csdn.net/crazywoniu/article/details/80942642vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 <router-link>编程式导航传递参数有两种类型：字符串、对象。字符串字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：this.$router.push(...
2024-01-10
vue静态路由vue-router怎么使用
静态路由vue-router使用路由可以方便我们访问多个组件，后面也会使用到路由跳转中安装:npm install vue --save-devnpm install vue-router --save-dev引入模块router在App.vue里面加写入 <router-view></router-view>在命令提示行输入 “npm run dev” 执行项目在浏览器输入域名地址 “域名地址+路由地址” 如： http://localhost:...
2024-01-10
vue-router实现根据用户权限配置菜单
业务逻辑比如有个系统有两个角色，普通用户和管理者，普通用户登录后可以看到模块A，管理者登录后可以看到模块B。技术实现逻辑：用户登录后，后台判断用户的角色是普通用户还是管理者，于是根据角色返回菜单权限，前端根据后台提供的菜单权限，动态配置路由。用户看到的模块都是符合...
2024-01-10
vue-computed计算属性
计算属性：用来封装你想对一个属性进行的操作computed VS mothod实现的效果和定义一个methods中的function相同，但是他们的区别在于：methods的function当触发重新渲染时总会重新执行，而计算属性是基于他们的依赖进行缓存的，只有在它的相关依赖进行改变时才会改变，这就意味着它的相关依赖没有发生改...
2024-01-10
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-router路由拦截造成死循环问题
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置const router = new Router({routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, children: [{...
2024-01-10
vue升级之路之vue-router的使用教程
使用 Vue 构建的项目，一个页面是由多个组件构成的，而且经常是做成单页面应用，所以在跳转页面的时候，传统的 href 已经跟不上时代的步伐了，于是 vue-router 应运而生在使用 vue-router 的时候，需要看看自己是否装了这个依赖，没有的话可以使用 npm install vue-router -S ，不过现在构建vue项目时有可以选...
2024-01-10
vue-router路由导航守卫中next控制实现
使用 vue-router 的导航守卫钩子函数，某些钩子函数可以让开发者根据业务逻辑，控制是否进行下一步，或者进入到指定的路由。例如，后台管理页面，会在进入路由前，进行必要登录、权限判断，来决定去往哪个路由，以下是伪代码：// 全局导航守卫router.beforEach((to, from, next) => {if('no login'){next(...
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-10vue-router动态设置页面title的实例讲解
由于用Vue框架开发的应用是SPA（单页面应用），采用的是路由的形式，没有所谓的页面，所以想让网页的标题随着路由的改变而改变，可以使用document.title = ×××来改变网页标题。但是在IOS APP里这种方式不起作用，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。解决方案是在路由切换...
2024-01-10vue-resource拦截器设置头信息的实例
使用vue-resource，设置头信息：Vue.http.interceptors.push((request, next) => { request.headers.set('Authorization', token) console.log(request.headers) next(response => { console.log(response.status) return response })})以上这篇vue-resource拦截器设置头信息的实例就是小编分享给大家的全部内容了，希...
2024-01-10
vue中的router-link不能动态绑定class
刚刚才发现，vue中的router-link好像在动态绑定class方面有问题，如下图如果这个样子动态绑定router-link的class和div的class，你会发现，div的class动态绑定没有问题，当鼠标经过div的时候，div的颜色会发生改变，但是如果你的鼠标经过router-link的时候，你会发现，router-link的颜色并不会发生改变，我把动态绑...
2024-01-10
如何判断router-view中是否有组件存在？
<template> <div class="my"> <router-view></router-view> <router-link to="/money">money</router-link> </div></template>点这个链接<router-link to="/money">money</router-link>的同时，上面显示...
2024-03-14vue-router二级导航切换路由及高亮显示的实现方法
这里以网易云音乐作为示例，效果图：我们先一层一层写导航先设计第一层1.设计导航页面样式第一个导航页面为DiscoverDiscover.vue：<!-- --><template> <div> 发现 </div></template><script>export default { name: "discover", data() { return { }; }};</script><style scoped></style>第二个导航页面为Mymusic其余代码一...
2024-01-10
Vue技术点整理VueRouter
路由 Vue Router对于单页面应用来说，如果涉及到多个页面的话，就必须要使用到路由，一般使用官方支持的 vue-router 库一，Vue Router 在项目中的安装引用1，在页面中使用<script>快速使用Vue Router开发<!doctype html><html> <head> <meta charset="utf-8"> <title>使用script直接引入Vue Router</title> </head> ...
2024-01-10vue实现同一个页面可以有多个router-view的方法
使用Vue+Element搭建项目的时候，为了避免一个页面过大，将tab里面的内容分成多个页面，并使用同级视图展示<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户详情" name="first"> <router-view></router-view> </el-tab-pane> <el-tab-pane label="用户组" name="second"> <router-vi...
2024-01-10详解vue-router和vue-cli以及组件之间的传值
首先简单介绍使用vue-router的四个基本步骤：（为了方便演示，所有代码都写在一个文件里）1.定义组件2.定义路由3.创建router实例并将定义好的路由传入4.创建和挂载根实例再来说一下vue-cli一、安装vue-cli脚手架工具cnpm install vue-cli -g二、 创建项目vue init webpack-simple vue_webpack 使用的是web...
2024-01-10对 Vue-Router 进行单元测试的方法
由于路由通常会把多个组件牵扯到一起操作，所以一般对其的测试都在 端到端/集成 阶段进行，处于测试金字塔的上层。不过，做一些路由的单元测试还是大有益处的。对于与路由交互的组件，有两种测试方式：使用一个真正的 router 实例mock 掉 $route 和 $router 全局对象因为大多数 Vue 应用用的都...
2024-01-10
Vue-认识状态管理vuex
vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试，可以多个组件共享状态。简单来说，就是共享的状态用state来存放，用mutations来操作state，但是需要用store.commit来主动式的操作mutations。 用一个简单的demo来认识vuex。 注意在使用vuex之前要先安装依赖（前提是已经...
2024-01-10
vue图片裁剪插件vue-cropper使用方法详解
本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法，供大家参考，具体内容如下我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后还是用了个大佬的demo，但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的，我这里采用了4:3的...
2024-01-10
