vue路由

VUE2组件懒加载浅析 vue2组件懒加载浅析 一、 什么是懒加载 懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。 二、为什么需要懒加载 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 三、如何与webpack配合实现组件懒加载 　　1、在webpack配置文件中的output路径配置chunkFilename属性 1 2 3 4 5 6 output: { path: resolve(__dirname, 'dist' ), filename: options.dev ? '[name].js' : '[name].js?[chunkhash]' , chunkFilename: 'chunk[id].js?[chunkhash]' , publicPath: options.dev ? '/assets/' : publicPath }, 　　chunkFilename路径将会作为组件懒加载的路径 　　2、配合webpack支持的异步加载方法 resolve => require([URL], resolve), 支持性好 () => system.import(URL)

目录 VUE环境搭建 VUE 项目创建 VUE 项目文件介绍 1、项目目录 2、配置文件：vue.config.js 3、main.js 4、.vue文件 vue请求生命周期： VUE 组件 配置全局样式 路由逻辑跳转，跳转到home页为例 路由重定向 生命周期钩子 VUE环境搭建 1、安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2、安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3、安装脚手架 cnpm install -g @vue/cli 4、清空缓存处理 npm cache clean --force VUE 项目创建 1、创建项目 vue create 项目名 // 要提前进入目标目录(项目应该创建在哪个目录下) // 选择自定义方式创建项目，选取Router, Vuex插件 2、启动/停止项目 npm run serve / ctrl+c // 要提前进入项目根目录 3、打包项目 npm run build // 要在项目根目录下进行打包操作 VUE 项目文件介绍 1、项目目录 dist: 打包的项目目录(打包后会生成) node_modules: 项目依赖 (不同电脑依赖需要重新构建) public: 共用资源 src:

一、router路由发展的几个阶段 1、后端路由阶段 后端渲染：前端只有html和css，后端通过jsp等技术渲染页面，再交给前端。 后端路由：后端处理url和页面映射之间的关系。后端通过正则匹配url，controller控制器来处理匹配的页面，把html返回给前端。 2、前后端分离阶段 后端负责数据， 前端渲染：网页中的内容大部分是由前端写的js在浏览器中执行，后端负责提供API和数据 3、前端路由阶段（SPA单页面富应用阶段） 整个网页只有一个html页面（包含html+css+js），当用户点击时，从url1–>url2，通过前端路由，加载url2的内容（在vue中就是加载一个组件。） 改变url页面不整体刷新，两种实现方式： （1）改变url的hash，location.hash=‘aaa’ （2）html5中的history模式pushState,history.pushState({},’’,‘home’)三个参数为data title url。 history.pushState入栈 history.go(-1)=history.back()出栈 history.forward()=history.go(1) 二、基础知识0 1、懒加载 build打包时，appxxx.js文件变得很大，使用懒加载更高效。 router懒加载：用到的时候再加载

1.点击事件跳转 //路由中配置 { path: '/examCenter/', name: 'examCenter', component: () => import(/* webpackChunkName: "about" */ '../views/examCenter.vue'), prop:true, }, //点击事件触发 <img src="../img/1.jpg" class="imgs" @click="hosService" /> //方法调用 methods: { examCenter() { this.$router.push("/examCenter") }, } 2.标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 来源： CSDN 作者： ☕fairylandqaq 链接： https://blog.csdn.net/qq_39396379/article/details/103578691

转载自： http://www.bslxx.com/m/view.php?aid=1799 1.框架和库的区别： 框架：framework 有着自己的语法特点、都有对应的各个模块 库 library 专注于一点 框架的好处： 1.提到代码的质量，开发速度 2.提高代码的复用率 3.降低模块之间的耦合度 （高内聚低耦合） UI：user interface GUI : graphical user interface CLI : command line interface API : application interface 思维模式的转换： 从操作DOM的思维模式 切换到 以数据为主 2.Vue概述 1、what 是一个渐进式的构建用户界面的js框架 2、where 小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序 3、why 1.方便阅读的中文文档 2.容易上手 （学习曲线比较缓和） 3.体积小 4.基于组件化的开发方式 5.代码的可读性、可维护性得到了提高 4、how 工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能 搭建环境： 方式1 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project #

简单的vue路由守卫 不明白路由守卫的可以先去百度一下。。。。。。 要做路由守卫需要以下三点，要是登录注册做好的可以跳过第一步，没有做好的就需要创建缓存了，具体可以百度搜索 1、本地存储方法封装，我的是在src下的assets文件中建立一个本地缓存cookie.js 在cookie.js里写（我是百度别人写好的，嘿嘿！！！） export function setCookie ( c_name , value , expire ) { var date = new Date ( ) date . setSeconds ( date . getSeconds ( ) + expire ) document . cookie = c_name + "=" + escape ( value ) + "; expires=" + date . toGMTString ( ) } export function getCookie ( c_name ) { if ( document . cookie . length > 0 ) { let c_start = document . cookie . indexOf ( c_name + "=" ) if ( c_start != - 1 ) { c_start = c_start + c_name . length + 1 let c

创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const First={template:'<div>菜单一</div>'}const Second={template:'<div>菜单二</div>'}const Home={template:'<div>菜单三</div>'}const router=new VueRouter({ mode:'history', //模式 base:__dirname, //base可选参数指当前路径 routes:[ {path:'/',component:First}, {path:'/First',component:Second}, {path:'/Second',component:Home} ]})找到入口文件编辑Router.js引入 import Vue from 'vue'import Router from './Router' 来源： https://www.cnblogs.com/longly/p/9136388.html

1.通过query实现： <router-link :to="{ name:'home',query:{id:1} }">跳转页面</router-link> 获取： this.$route.query 2.通过params配置： <router-link :to="{ name:'home',params:{'name':'Tom'} }">跳转页面</router-link> 获取: this.$route.params 来源： https://www.cnblogs.com/hspl/p/12022445.html

一个按钮绑定一个方法，方法是跳转到某个路由地址，当已经点击触发方法到该路由下的时候，再进行点击该按钮控制台就会报错，不会影响项目运行 解决方法： if(this.$route.path == '/bindingmodifica/newpassword'){ return '' }else{ this.$router.push('/bindingmodifica/newpassword') } 判断该路由是否为改地址，不是的时候再进行跳转 来源： https://www.cnblogs.com/huchong-bk/p/12047998.html

组件分为两种： 路由组件 、 非路由组件 。 路由组件： 　必须在 router 文件夹下的index.js中注册。 　一般存放在src的view文件夹下。 非路由组件： 　没有在路由中注册，一般放在src的component文件夹下。 不管是路由组件还是非路由组件，在使用的地方都要使用import导入该组件。 如果是非路由组件则需要再export中指定一下。 例如： import AddSubject from "../../components/AddSubject"; export default { components: {AddSubject}, data() { } 　 组件注册: Vue.component(组件名称，{ data:function(){ return{ 属性名:属性值 } }， template:要注册的组件，可以是一个.vue文件，也可以是一个template字符串, method:{ handle:function(){} } }) 在html代码中就可以直接使用:<组件名称> 定义组件注意事项 1，template中只能有一个根节点。 例如： Vue.component(“test-component”，{ data:function(){ return{ 属性名:属性值 } }， //错误使用方式，在template包含了两个根节点