vue-router总结
一、文件目录说明main.js：应用的入口文件【js文件入口】App.vue：根组件，整个组件的入口【组件文件入口】new Vue({}); //Vue是构造函数，本质上是一个函数，函数就有原型prototype加载文件不要后缀名：resolve:{ extensions:['.js','.vue','.json'], alias:{ 'vue$':'vue/dist/vue.esm.js', '@':resolve('src') //@就...
2024-01-10
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-router 路由懒加载
webpack打包会将所有资源文件合并压缩成一个文件，导致最终的文件非常大，甚至超过几M，以致页面首次加载会比较慢，如下图：其中红色标出的是在浏览器中加载的js文件，gzip压缩前已经达到500多KB了。再看看路由按需加载后：文件被拆成一个个小的文件，即webpack的文件分割。这里是以页面为单位...
2024-01-10
vue-router简易的实现原理
class VueRouter { constructor(options) { this.$options = options; this.routeMap = {}; // 路由响应式 this.app = new Vue({ data: { current: "/" ...
2024-01-10
vue-router 安装和基本使用
1、安装npm install vue-router --save2、src下创建router文件夹并创建index.js文件 ---- /src/router/index.jsindex.js/* * @Description: web router * @Author: wangwz10@lenovo.com * @LastEditors: wangwz10@lenovo.com * @Date: 2020-05-28 15:48:40 * @LastEditTime: 2021-02-04 10:3...
2024-01-10
vue-router 动态添加 路由
动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单，前端动态添加路由 然后在设置菜单 1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 使用方法 this.$router.options.routes[0].children.push({//插入路由 name:'list', pa...
2024-01-10
vue-router重定向 不刷新问题
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。 问题描述: 之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。 解决方法： 通过阅读vue-ro...
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-vue-router.js路由－－进级
正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。全局钩子你可以使用 router.beforeEach 注册一个全局的 before 钩子：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ......
2024-01-10
vue router-link 上添加点击事件
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。所以如果在想要在router-link上添加事件的话需要@click.native这样写<router-link :to="/user/age/10" @click.native="overTag(index)" @mouseover.native=...
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脚手架结构及vue-router路由配置
首先官网介绍，用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。 在我们搭建vue环境之后，会生成一个文件夹，如图一级...
2024-01-10
Vue-router 路由详解 多级路由
今天我来分享一下vue路由方面的心得体会。文章源码位置 https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base使用的脚手架为Vue3.0，IDE为VSCode首先引入vue路由cnpm install vue-router --save-dev然后我们在src目录下建立文件夹router,并创建文件index.js项目大致结构如下然后我们在view文件夹(新建一个)下创建...
2024-01-10
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.js路由vue-router使用方法详解
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切...
2024-01-10
vue--前端路由及vue-router两种模式
前言 路由这个概念最早在后端出现，随后前后端分离，直至当今的单页面应用，路由也在一直发生变化。本文来总结一下路由变化和vue-router中的路由模式区别相关知识点。正文 1、什么是前端路由 （1）后端路由阶段 早期的页面都是由html页面在服务端渲染的，服务端直接返回给客户...
2024-01-10
vue--vuex详解
Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 为什么要用Vue...
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使用日记（21）：vue-router详解（2）
之前使用router-link的to属性进行路由跳转，现在使用另一种方式进行跳转：使用代码的方式进行跳转。vue-router源码内部定义了一个对象：$router，其实就是一开始使用vue-router时创建的路由实例对象，这个对象在任意一个组件内都可以使用，所以可以调用它的push和replace方法进行路由跳转：说明：push和rep...
2024-01-10
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-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
