使用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...
今天学习vue2.0 的 router-view , 爆出的错误不计其数，不知道哪位大神写的router-view,配置的参数竟然不是router，而是routes =_=|| 这是花了一上午整出来的main.js，还有网上的同道们的提醒： import Vue from vue; import VueRouter from vue-router; import App from ./App; import goods from ./components/goods/goods;Vue.config.productionTip = false;Vue.use(VueRouter);const routes = [{path: /goods, component: good...
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地址明确，便...
传递参数的方法： 1.Params 由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数： 通过name获取页面，传递params： 在目标页面通过this.$route.params获取参数： 2.Query 页面通过path和query传递参数，该实例中row为某行表格数据在目标页面通过this.$route.query获取参数： this...
- 首先确定此项目在本地能够运行成功 在本地命令行中输入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-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router一、使用路由在main.js中，需要明确安装路由功能：import Vue from vue import VueRouter from vue-router import App from ./App.vue Vue.use(VueRouter)1.定义组件，这里使用从其他文件import进来 import index from ./components/index.vue import hello from ./components/hello....
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题，具体内容如下一. 异常描述 本来使用的是vue-router的hash模式，但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉），所以就需要使用history模式，然后就让后端改下nginx配置： location / { try_files $uri $uri/ /index.html; }vue-router使用history模式+使用嵌套路由： ...
组件系统是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...
简介主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。 分为三大类：全局守卫、路由守卫、组件守卫 全局守卫 beforeEach beforeResolve afterEach路由守卫 beforeEnter组件守卫 beforeRouteEnter// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建虽然无法直接获取组件实力但是我们可以通...
前言 大家都知道对于单页应用，官方提供了vue-router进行路由跳转的处理，而最近在做一个基于vue-router的SPA，想对无效路由(404)页面做下统一处理。这次我真的没有在官方文档找到具体的说明[捂脸]所以本文仅是我DIY的一个思路，求轻虐=_= 在我的理解中，vue-router是根据path去匹配注册的route，匹配到则加载对应的组件，匹配不到则重置(或者说清空)对应的router-view。所以，我们不做处理的话，最终页面展示的是一片空白。那么，...