vue-router

#vue-cli介绍 vue-cli是一个基于nodeJs、用于快速搭建vue项目的 脚手架。 #vue-cli安装、更新 安装过nodeJs 、cnpm 后，全局安装vue-cli（以后其他项目可直接使用）： npm install -g vue-cli 查看安装成功否 vue -V #vue-cli 使用 安装过webpack 、vue-cli后，可以开始搭建vue项目： vue init webpack <Project Name> # vue init webpack demo #一直回车直到 #是否要安装 vue-router 项目中肯定要使用到 所以 y 回车 #是否需要 js 语法检测 目前我们不需要 所以 n 回车 #是否安装 单元测试工具 目前我们不需要 所以 n 回车 #是否需要 端到端测试工具 目前我们不需要 所以 n 回车 #等待完成 或者 接下来 ctr+c 结束 #进入 cd demo cd demo #执行 npm install npm install #接下来执行 npm run dev npm run dev #默认浏览器会自动打开 #注意：如果您的浏览器是ie9以下的版本，请升级浏览器到最新版本或者下载谷歌浏览器或者火狐浏览器进行预览。在地址栏输入 http://localhost:8080/#/进行访问 来源： oschina 链接：

上一篇文章《 vue+vue-router+axios+element-ui构建vue实战项目之四（修改App.vue、router和page文件） 》中，我们重新配置了默认文件，使得项目能够正常运行。但是，项目仅仅是‘跑’起来了，没有涉及到ajax请求接口的内容。 vue本身是不支持ajax请求接口的，所以我们需要第三方工具。 一般使用较多的有vue-resource和axios，我以前学习的时候使用的是vue-resource，但是今天我们使用axios。 安装axios 首先，我们先安装axios工具，如下 1 npm install axios --save 好了，axios工具安装完成。 有关axios的更多内容，请移步： https://www.npmjs.com/package/axios ，中文资料请自行搜索。 调整main.js文件 调整后的代码，如下 1 import Vue from 'vue' 2 import App from './App' 3 import router from './router' 4 import axios from 'axios' 5 6 Vue.config.productionTip = false 7 // 全局注册axios 8 Vue.prototype.$http = axios 9 10 /* eslint

vue 路由嵌套 vue-router --》children 在项目的很多子页面中，我们往往需要在同一个页面做一个组件的切换，同时保存这个页面的部分数据（比如树形菜单），进而显示不同的数据，之前我都是通过v-show/v-if来实现，但当切换的组件太多时，上述方法显然不太合理，而在实际开发中，当你切换的组件太多时，后端往往会将你切换组件的路由给你，所以在这说一下关于vue-router中children，来解决此问题。 　　例如：在routerChildren.vue中有两个按钮，点击按钮1跳转的one页面 ，点击按钮2跳转的two页面 ，但是需要保存这两个按钮（如果直接通过this.$router.push(),按钮将会消失，会完全跳转） 　　1.首先我们需要配置一下路由 ，在router.js中　　　　 import RouterChildren from "./views/routerChildren.vue" import RouterChildrenOne from "./views/children/one.vue" import RouterChildrenTwo from "./views/children/two.vue" { path: "/routerChildren", name: "routerChildren", component:

在一个页面中如果想实现三个页面的拼接组成一个页面，这时候就用到嵌套路由了。 第一种方法： 1.顶部页面 /views/Home.vue <template> <el-container> <!-- 顶部 --> <el-header class="headerAll"> <div class="headImage"></div> <!-- <img src="" class="headImage"> --> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#222a30" text-color="#fff" active-text-color="#29e2fe" @select="handleSelect"> <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.index" v-on:listenToChildEvent="menuClick">{{item.name}}</el-menu-item> </el-menu> <el-dropdown> <img src="../assets/headImage.jpg" class=

1、报错原因： 在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise)的问题，在3.1.0版本里面新增功能：push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。 2、解决方法： a、在调用方法的时候用catch捕获异常 this.$router.replace('/home').catch(err => { console.log(err) }) 　　 b、对Router原型链上的push、replace方法进行重写，这样就不用每次调用方法都要加上catch 在router.js加入以下内容： import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject) return originalPush.call(this, location).catch(err => err) } 　

什么是 mvvm？ MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 mvvm 和 mvc 区别？ mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化

问题背景： 　　vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下： http://localhost:8080/bank/page/count 这样的了； 　　不过history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404 　　怎么解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html 上就可以了。 解决方案： 　　对于VUE的router[mode: history]模式在开发的时候，一般都不出问题

1、定义路由 routes: [ { path: ' /product ' , //第一层路由 name: ' product ' , component: Vproductcontent, //父组件渲染的是子组件的内容<routerview/> 写在父组件中 children:[ { path: ' /product/hotproduct ' , //第二层路由 name: ' hotproduct ' , component: Vhotproduct, children:[ { path: ' /product/hotproduct/detail/:id(\\d+) ' , //第三层路由 component: Vhotproductdetail, } ] }, ] }, ] 2、 使用 router-link 组件来导航 在左侧菜单栏的Vleft组件中使用router-link <ul class = " nav nav-sidebar " > <router-link tag= " li " to= " /product " ><a href= " # " >产品管理</a></router-link> </ul> 2.1 加入默认样式 默认选中的样式是在li标签上加上class="active" # 将其渲染成以下样式，这是默认选中的样式 <ul class = "

本文由葡萄城技术团队原创并首发 转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 2020年9月18日Vue 3.0正式发布，距离2016年10月1日Vue 2.0发布已经过去了4年。不知道发布日期的选择是否是作者尤大有意为之，在这四年间，Vue作为个人项目取得了巨大成功，github上的 star数迅速超过10W，成为了三大前端流行框架之一，而在国内它更是作为前端初学者入门的首选占据着霸主地位。 众所周知，软件开发过程里的重构就像是凤凰浴火，浴火直至永生。2018年2月尤大就有了重构Vue，并于同年九月建立了原型的同时也创建了vue-next的repo，而后正式宣布Vue 3.0项目的启动。随后确定了早期实现的方式（class, TypeScript, hooks, time slicing）以及建立了RFC（Request for Comments，征求意见）流程。 在Composition API 确定之前，团队经历了Class API 和 Function API的讨论，功能的回退。团队始终希望保持Vue平缓的学习曲线，以及与用户一起成长的态度，Vue 3.0开发并不激进。在2019年8月确定了 Composition API RFC，随后关于3.0周边的开发也加快了步伐，并与2020年1月2日发布了alpha版本