vue-router
vue-router官网：https://router.vuejs.org/zh/installation.html参考网址:https://www.cnblogs.com/SamWeb/p/6610733.html...
2024-01-10
Vue-router插件使用
Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更新该怎么做？Vue中采用锚点来完成。 如访问http://127.0.0.1#/index就是主页，而访问http://127.0.0.1#/home就是家目录。 手动分析url组成与处理视图的切换非常麻烦，所以Vue提供插件Vue-router，它能够根据用户...
2024-01-10
vue-router的访问权限管理
路由守卫（路由钩子、拦截器）vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。可以不登录直接进入系统，但是访问指定位置需要登录只有一级目录的情况下的拦截import Vue from 'vue'import VueRouter from 'vue-rout...
2024-01-10
vue-router如何更新路由信息
背景在 App.vue 文件中通过 addRoutes 动态添加路由。访问路由 /login，我发现 this.$route 返回的数据中，meta.a 却是 undefined。如果一秒后再次访问 this.$route，meta.a 为 1。这是为何？create() { const routes = [{ path: "login", name: "login", component: () => import(\'./login.vue), meta: { a: ...
2024-01-10
vue-resource插件使用
本文的主要内容如下：介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面本文11个示例的源码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上...
2024-01-10
Vue的router-link标签
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元素，这...
2024-01-10
vue-router定义元信息meta操作
router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue'import TestChild from '../views/TestChild.vue'import AView from '../vi...
2024-01-10
vueX+vue-router信息管理系统
vueX+vue-router信息管理系统利用vueX进行数据存储状态管理，路由跳转页面，如果用路由传值，会出现传值无法保存，所以用vueX效果图：1：2：store内代码：添加数据：数据列表：app.vue:router路由配置:...
2024-01-10
vue-resource 上传图片
const formData = new FormData()formData.append(\'file\',img,params.name);formData.append(\'id\',params.id);formData.append(\'name\',params.name);return new Promise((resolve,reject)=>{ Vue.http.post(uploadImg,formData).then(function(res){ resolve(res.bo...
2024-01-10
vue-cli3路由vue-router用法
安装npm install vue-router导入vue-router// main.js文件内// 导入vue-routerimport Vue from 'vue' // vue-router是以来vue的import VueRouter from 'vue-router' // 导入vue-router，注意import VueRouter 不能写成 import Vue-Router，因为不支持带-的写法。// 必须要通过 Vue.use() 明确地安装路由功能Vue.use(VueRoute...
2024-01-10
vue-router3动态路由刷新出现白屏?
最近在使用vue-admin-template开发后台管理系统，遇到动态路由刷新出现页面白屏问题用户登录时通过角色获取角色路由并动态加载到router对象 login({ commit }, userInfo) { const { username, password } = userInfo; return new Promise((resolve, reject) => {...
2024-03-04
Vue路由（vue-router）详细讲解指南
中文文档：https://router.vuejs.org/zh/Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）： route...
2024-01-10
vue-router 如何优雅传参嵌套的对象？
在传递嵌套的对象时，拿到的是字符串 '[object Object]', 而不是原始的对象.router.push({ name: 'somewhere', params: { oops: { a: { b: { c: 'gets removed'} } } })console.log(route.params.oops); // '[object Object]'除了使用 oops: (JSON...
2024-02-23
Vue-router 路由组件懒加载问题
关于vue-router 的路由组件懒加载问题import Vue from 'vue'import Router from 'vue-router'const page404 = () => import('@/views/404')// const view = name => import(`@/views/${name}`)Vue.use(Router)const constantRoutes = [ { path: '/', name: '首页', component: () ...
2024-01-10vue-router懒加载速度缓慢问题及解决方法
懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分...
2024-01-10
vue(6)-vuex
step1npm install --save vuexstep2他的用法与vue-router差不多，main.js中，通过Vue.use(),使用；然后new Vuex.store();然后new Vue( store:store):step3这样在任何组件里，可以通过{{$store.state.city}}来使用同样，在任何组件里可以通过this.$store.commit(..，..)来执行mutations:...
2024-01-10vue-router实现tab标签页（单页面）详解
vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。首先，.vue中的内容非常简单，<router-link>创建标签，并指定路径，<router-view>渲染路由匹配到的组件。<temp...
2024-01-10
Vue-cli3如何添加路由（router）
之前使用的vue-cli2的是否可以在创建项目时直接引入vue-router，但是现在Vue-cli3新建项目后却少了很多东西，我们需要自己来安装使用路由。具体方案如下：安装路由npm install vue-router创建router.js与mian.js同级router.js中的内容为import Vue from 'vue'import Router from 'vue-router' //组件模块import Main from './components/...
2024-01-10
Vue关于使用vue-router控制视图渲染的问题。
环境：Vue2.0 + vue-router + element-ui + 新手,思路：想通过正则判断vue-router的$route.path来控制SideBar组件的渲染与否，具体代码如下：App.vue<template> <div id="app"> <div class="warper"> <div class="header"> <TopBar></TopBar> </div> <el-row><el-col :span="2" > ...
2024-01-10
vue-router 代理线上后,刷新页面登陆信息失效
vue-cli项目：使用vue-router配置路由.env.develop配置本地开发相关信息router.js文件：大概结构!app.vue文件nav.vue导航组件点击导航后跳转页面，正常展示；点击浏览器后退按钮，正常条状；但是点击浏览器刷新按钮，页面接口报500，浏览器导航栏地址变成/loginvue.config.js里面配置了publicPath：fbp-xxx在localhost:8...
2024-03-14移动端底部导航固定配合vue-router实现组件切换功能
在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。相信对于很多朋友而言，这是一个很简单的需求，而且市面上有很多开源的组件库就可以实现，像比如说：cube-ui等...
2024-01-10
vue-quill-editor的使用及个性化定制操作
最近在用vue + element ui写一个小应用要用到富文本编辑器，以前做项目都一直都用ueditor，但是看了一下它与vue的兼容性并不好，又对比了几个后，选择了vue-quill-editor。vue-quill-editor基于Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用，正是我想要的☻。这里只介绍基本的安装和部分简单的...
2024-01-10
【Vue】vue.js v-for 分组渲染
我想实现一个像手机联系人的一个的列表。并且通过首字母来分组。 请问如何用vue 里面的v-for 来渲染？HTML模板<li v-for="(item,index) in carbrands"><h2 class="list-title" v-show="" >{{item.LETTER}} {{index}}</h2><ul class="list-content"><li class="list-car-item" @click="typeShow"><img :src="https://segment...
2024-01-10
vue的分页组件 - muamaker
vue的分页组件 2018-03-23 17:41 muamaker 阅读(258) 评论(0) 编辑 收藏 举报<template> <div class="page-nav"> <div class="page-btn-wrap"> <span class="prev" v-bind:class="{ disabled: currPage==1 }" v-on:click="pagePrev" > 上页 </span> <span class="it...
2024-01-10
vue基于better-scroll实现左右联动滑动页面
本文实例为大家分享了vue基于better-scroll实现左右联动滑动页面，供大家参考，具体内容如下界面如下：vue模板<template> <div class="goods"> <div class="menu-wrapper"> <ul> <li class="menu-item" v-for="(good, index) in goods" :key="index" :class="{current: currentIndex===index}" @click="clickMenuItem(i...
2024-01-10
