- 首先确定此项目在本地能够运行成功 在本地命令行中输入npm run start，无报错，且打开127.0.0.1:3000 有写的路由为/的页面，如图此为文件层级关系 front为前端文件 xk3为后台express与数据库mysql链接的文件 用命令行进入后台并且运行，启动成功这是路径为/的页面在浏览器中输入路径http://localhost:3000/ 浏览器中显示WelCome to express 至此此项目在本地运行成功，我们现在就要放到服务器上。 - 准备工作 此前服务器的基本设...
今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一，router帮我们完成了SPA应用间的页面跳转。 并且，配合axios这样的第三方库，我们可以实现配合后台接口的拦截器功能。 对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了， 但是，当我们的页面比较多的时候，我们就需要分出两个文件出来：一个定义我们的路由和组件，另一个实例化组件，并将路由...
基本环境配置： webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件 首先引入： import Vue from vue import Router from vue-router然后在路由里面配置每个路由的地址： routes: [{ /* （首页）默认路由地址 */path: /,name: Entrance,component: Entrance,meta: {title: 首页入口}},{ /* 修改昵称 */path: /modifyName/:nickName,name: modifyName,component: modifyName,meta: {title: 修改昵称}...
在每个项目中路由是不可或缺的，最近学习vue-router和ElementUI配合使用实现导航栏，在学习的过程中遇到一个问题：点击浏览器的刷新之后页面停留在原来的位置，但是导航却是默认第一个。 由于接触前端时间不长，对于路由的概念不是特别清楚，按照文档写了之后完全不知道怎么下手了，请教了同事，同事的解决办法是利用vuex管理，但是vuex这块还没有接触过，所以这个问题就一直搁置了，今天周末自己在家学习偶然直到了可以使用$route...
组件系统是Vue的一个重要组成部分，它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件，通过组合组件来组成应用程序，结合 vue-router 的路由功能将各个组件映射到相应的路由上，通过路由的变化来告诉Vue要在哪里渲染他们，实现各个组件、各个页面之间的跳转导航。 问题 使用 vue-router 切换路由时会触发组件树的更新，根据定义的路由渲染一个新的组件树，大致的切换过程是这样的： 停用并移除不需要的组件验证切换的...
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。 1.新闻列表页模板<template id="news"><div><h2>新闻列表</h2><ul><li><router-link to="/news/001">新闻001</router-link></li><li><router-link to="/news/002">新闻002</router-link></li></ul> </div></template>我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。 2.新闻详细页组件准备<template id="News...
前言 大家都知道对于单页应用，官方提供了vue-router进行路由跳转的处理，而最近在做一个基于vue-router的SPA，想对无效路由(404)页面做下统一处理。这次我真的没有在官方文档找到具体的说明[捂脸]所以本文仅是我DIY的一个思路，求轻虐=_= 在我的理解中，vue-router是根据path去匹配注册的route，匹配到则加载对应的组件，匹配不到则重置(或者说清空)对应的router-view。所以，我们不做处理的话，最终页面展示的是一片空白。那么，...
vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo所以下面介绍下，路由懒加载1、为什么要使用路由懒加载呢用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效2、用法import Vue from vue import Router from vue-router Vue.use(Router) export default new Router({rou...
有时候我们需要页面滚动条滚动到某一固定的位置，一般使用Window scrollTo() 方法。 语法就是：scrollTo(xpos,ypos) xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。 例如滚动内容的坐标位置100,500： window.scrollTo(100,500);好了，这个scrollTop这儿只是简单介绍一下，下面我们介绍下veu-router中的滚动行为。 使用前端路由，当切换到新路由时，想要页...
在默认情况下, 同名路由之间的切换, 由于组件可以服用, 放在ready里获取数据, 是不会执行的, 有两种方法可以解决 注意: 该问题仅存在于 vue1 方法1: 将数据获取放到route.data下~ route: {data({to: {params: { page }}}) {return Promise.all([this.getApi()]).then(() => {})} } 方法2: 设置route.canReuse = false, 强制组件不复用~ route: {canReuse() {return false} }, ready() {var request = $.ajax({type: "POST",dataTyp...
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm...
通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下 login ---用户名--->main ①明确发送方和接收方②配置接收方的路由地址 {path:/myTest,component:TestComponent} --> {path:/myTest/:id,component:TestComponent}③接收方获取传递来的数据 this.$route.params.id④跳转的时候，发送参数 this.$router.push(/myTest/20) <router-link :to="/myTest+id">跳转</router-link> 代码：<!doctype html> <html><head><meta ...
通过VueRouter来实现组件之间的跳转，供大家参考，具体内容如下提供了3种方式实现跳转：①直接修改地址栏中的路由地址 <!doctype html> <html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script> <!-- 引入文件 --><script src="js/vue-router.js"></script></head><body><div id="container"><p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --><router-view></router-view></div><script>var...
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 vue-router 我们知道路由定义了一系列访问的地址规则，路由引擎根据这些规则匹配找到对应的处理页面，然后将请求转发给页进行处...
如下所示： router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限if (token) { // 判断当前的token是否存在next();}else {next({path: /login,query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由})}}else {next();} });在这之前是给路由加一个meta属性： {path: /index,meta: {title: ,requireAuth: true, // 添加...