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-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-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面本文11个示例的源码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上...
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定义元信息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
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-computed计算属性
计算属性：用来封装你想对一个属性进行的操作computed VS mothod实现的效果和定义一个methods中的function相同，但是他们的区别在于：methods的function当触发重新渲染时总会重新执行，而计算属性是基于他们的依赖进行缓存的，只有在它的相关依赖进行改变时才会改变，这就意味着它的相关依赖没有发生改...
2024-01-10
vue升级之路之vue-router的使用教程
使用 Vue 构建的项目，一个页面是由多个组件构成的，而且经常是做成单页面应用，所以在跳转页面的时候，传统的 href 已经跟不上时代的步伐了，于是 vue-router 应运而生在使用 vue-router 的时候，需要看看自己是否装了这个依赖，没有的话可以使用 npm install vue-router -S ，不过现在构建vue项目时有可以选...
2024-01-10vue-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-10![Vue中router-link介绍[转]](/wp-content/uploads/thumbs/533237_thumbnail.jpg)
Vue中router-link介绍[转]
原文地址：http://router.vuejs.org/zh-cn/api/router-link.html<router-link><router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的...
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-10vue-router动态设置页面title的实例讲解
由于用Vue框架开发的应用是SPA（单页面应用），采用的是路由的形式，没有所谓的页面，所以想让网页的标题随着路由的改变而改变，可以使用document.title = ×××来改变网页标题。但是在IOS APP里这种方式不起作用，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。解决方案是在路由切换...
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-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-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
