背景 在开发提分加项目的过程中，遇到了点击下拉菜单时在新窗口中打开页面，由于之前一直做的是单页面应用，没有碰到过类似的需求，于是上网搜了一下解决办法，也再次系统地温习了一下vue-router。 解决 使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。const {href} = this.$router.resolve({name: "statistics-explain",params: {classID: id,ex...
最近因为业务需要，实现了一个简单的前端 router，正好也来看一下 vue router 是怎么实现的。这次先来一起看看 vue-router 初始化时做了什么。 vue router 的初始化使用步骤我们首先来看 vue-router 的使用步骤，然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤： 引入 vue-router： import VueRouter from vue-router;利用 vue 的插件机制，加载 vue-router： Vue.use(VueRouter);实例化 VueRouter：...
说明：vue-router的几个文章中例子是连贯的，因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字，根据名字进行匹配给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。二、代码展示： 目录视图1、命名路由 2、命名视图 index.js import Vue from vue import Router from vue-router import Goodlists from @/Goodlists/goods import Title from @/Goodlists/title import Img ...
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样： 浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）浏览器根据数据包的 Content-Type 来决定如何解析数据简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资...
前言： 今天我来给大家说道说道v-router，这是个什么东西？我们先从动态路由讲起。GitHub：https://github.com/Ewall1106/mall/tree/master1、动态路由有一个什么适用场景呢？ 比如在写商品详情页面的时候，页面结构都一样，只是商品id的不同，所以这个时候就可以用动态路由动态。 2、官方文档 首先我们来看看官方文档上是怎么解释动态路由的？（https://router.vuejs.org/zh-cn/） 你可以在一个路由中设置多段“路径参数”，对应的...
上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。GitHub：https://github.com/Ewall1106/mall1.嵌套路由的使用场景是什么呢？ 大家都知道选项卡，在选项卡中，顶部有数个导航栏，中间的主体显示的是内容；这个时候，整个页面是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，这个时候就是路由中嵌套路由。 2.具体是怎么实现的？ ① 为了演示，我们现在view文件夹下新建一个title1.vue和title2.vue用来存放...
前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。1.首先来说说什么是命名路由？ ① 官方文档的解释：https://router.vuejs.org/zh/guide/essentials/named-routes.html就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.p...
前言：编程式路由在我们的项目使用过程中最常用的的方法了。GitHub：https://github.com/Ewall1106/mall/什么是编程式路由呢？就是通过写js代码来实现页面的跳转 1.$router.push(name); 或者 $router.push({path: name}); 首先我们来讲讲简单的，上面两个方法记住，等效的。① 还是在test.vue组件里面写个div并给它添加一个click跳转事件：div上添加一个click点击事件② 在view文件下新建一个goods.vuegoods.vue③ 在router中引入这...
一、引子 要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题 二、vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器， 这里的路由就是SPA（单页应用）的路径管理器 。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适...
基于vuex, vue-router,vuex的权限控制教程，完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程，一步一步的走完整个流程。 首先从打开本地的服务localhost:8080开始，我们知道打开后会进入login页面，那么判断的依据是什么。 首先是token。 没有登陆的用户是获取不到token的，而登陆后的角色我们会将token存到local或者seesionStorage 因此，根据当前有没有token...
用过vue-router都知道它可以实现模块js的懒加载，即只有当需要时才去加载对应模块的js脚本文件，以加速主页的显示。比如只有第一次用户点击某个“用户信息”按钮或菜单时，才下载“用户信息”这个模块的js组件。 懒加载的实现，依赖与webpack下AMD模式require函数的功能。webpack会将异步require的文件生成一个独立的js文件，调用时异步下载这个js且在完成后再执行它。开发项目中实现的关键代码是： const basicInfo = {path: /use...
首先在大前提vue-cli已经安装好的情况下，并且cnpm install后(官网使用的是npm，但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象)，这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具，对于刚接触的新手们建议关闭，不然代码写的不符合它的规范你的编译器会一直报错，如下图安装好脚手架之后就像这样终端输入npm run dev，然后打开localhost:8080就可以看到项目运行啦大致分析一下几个比较常...
使用vue cli创建一个webpack工程 加入vue-router然后使用路由引入一个新的组件。这时路由和链接是这样写的 const router = new VueRouter({mode: history,base: __dirname,routes: [{path: /first,component: firstCom}] }) <a href="/first" rel="external nofollow" >Try this!</a>1、npm run dev查看没有问题 2、npm run build打包 3、起一个服务（例如：python -m SimpleHTTPServer）然后查看index.html页面，发现路由会请求/f...
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述，主要参考 Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目 2.项目呈现效果项目呈现网址：www.zhoupeng520.cn/index.html 项目中主要用了Flex布局，以及viewport相关知识，已达到适应各终端屏幕的目的 3.项目主要目录4主要代码如下 （1）App.vue <template><div id="app"><router-view class="view"></router-view><div class="nav"><router-link class="nav-item" to="...
上一篇主要写了一下vuer-router的基本使用，可以说解决温饱了，下面就再来点下午茶吧 模式 vue-router中的模式选项主要在router实例化的时候进行定义的，如下 const router = new VueRouter({mode: history, // 两种类型history 还有 hashroutes: routes // 可以缩写成routes })有两种模式可供选择，history 和 hash，大致对比一下，模式优点缺点hash使用简单、无需后台支持在url中以hash形式存在，不会传到后台history地址明确，便...