vue-router 快速入门 配置路由 $ npm install vue-router --save routes.js import Home from ./pages/Home.vue import Gifs from ./pages/Gifs.vue import User from ./pages/User.vueexport const routes = [{ path: , component: Home },{ path: /gifs, component: Gifs },{ path: /user/:id, component: User }//指定路由和对应要渲染的组件//404的path应该是*,要放在最末尾，当前面的都匹配不到时才匹配到404页面//this.$rout...
注意：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/hell...
官方文档： 旧版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版：http://router.vuejs.org/（2.0版本） 此文是旧版 文件结构图：基本用法： <router-view>是一个顶级的路由外链，用于渲染匹配的组件。 例如：我的应用入口是app.vue 那么在app.vue中添加如下代码， 此处涉及ES6。 app.vue <template><div class=page index-content><router-view class="view"keep-alivetransition="slide"></router-view><Footer...
模板抽离 我们已经学习过了Vue模板的另外定义形式，使用<template></template>。<!-- 模板抽离出来 --><template id="home"><div>首页</div></template><template id="news"><div>新闻</div></template> 然后js里定义路由组件的时候：// 1. 定义（路由）组件。const Home = { template: #home };const News = { template: #news };路由嵌套 实际应用界面，通常由多层嵌套的组件组合而成。 比如，我们 “首页”组件中，还嵌套着 “登...
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了，用npm安装命令 npm install vue-router --save-dev第二步在.vue组件里添加标签，格式如下<div id="app"> <p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定在main.js文件设置的别名链接，如/1 --><!-- <router-link> 默...
使用vue-router 来实现webapp的页面跳转，有时候需要传递参数，做法如下：参考文献：http://router.vuejs.org/en/named.html 主要有以下几个步骤： （1） 设置好路由配置 router.map({/history/:deviceId/:dataId: {name: history, // give the route a namecomponent: { ... }} })这里有2个关键点： a）给该路由命名，也就是上文中的 name: history, b）在路径中要使用在路径中使用冒号开头的数字来接受参数，也就是上文中的 :dev...
对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。 安装基于传统，我更喜欢采用npm包的形式进行安装。 npm install vue-router --save当然，官方采用了多种方式进行安装，包括bower,cdn等。 基本用法在HTML文档中使用，只需要利用v-link这个directive就行了，如： <a v-link="{path: /view-a}">Go to view-a</a>?ps: v-link还支持activeClass用于指定链接活跃时的css样式。replace属性...
说明： 我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。 本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。 1.Vue.js系列之项目搭建（1） 2.Vue.js系列之项目结构说明（2） 概述 Vue非常适用于实践单页面应用程序也就是平时大家...
vue中vue-router的使用:main.js如何配置(es6的写法):在引用之前记得先 npm 下所需要的vueimport Vue from vue import App from ./App.vue import Router from vue-router import Resource from vue-resource //import VueTouch from vue-touch var VueTouch = require(vue-touch)//引入home页面 import homepage from ./page/home.vue //引入test页面 import test from ./page/test.vueVue.use(Router); Vue.use(Resource); Vue....
二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。 如果用vue的话，可以用vue-router改变<router-view>里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了<router-view>里面的组件，渲染了新的组件。 在线demo：http://runjs.cn/code/9th3cgxo html 使用 Vue.js 时，我们就...
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了，直奔主题。一、Vue 系列一已经用vue-cli搭建了Vue项目，此处就不赘述了。二、Vue-router Vue的路由，先献上文档（）。 路由在全家桶里面定位是什么呢，创建单页应用！简单！我们知道Vuejs是一系列的组件组成应用，既然是组件那么就需要组合起来，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们！ 我们一般在APP.VUE文件里面使用route...
编程式导航 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="http://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><title>Vue-Router</title> </head> <body><div id="box"><p><button @click="jump(...
今日目标 1.初始化项目 2.基于Vue技术栈进行项目开发 3.使用Vue的第三方组件进行项目开发 4.理解前后端分离开发模式 1.电商业务概述 客户使用的业务服务：PC端，小程序，移动web，移动app 管理员使用的业务服务：PC后台管理端。 PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计 电商后台管理系统采用前后端分离的开发模式 前端项目是基于Vue的SPA...
两种获取地址参数方法//query方式this.$route.query.变量//动态路由方式this.$route.params.变量编程式导航 跳转传参 this.$router.push({ path:, //可手写地址 name: //name需要在路由上面配置name属性才可以使用 params:{} //动态路由方式传参，如果使用path方式params会被忽略掉 query:{} //query方式传参 }) //使用动态路由方式需额外配置路由 配置路由格式 /路由/:变量 routes:[{path:cate,...
vue-router：VueRouter模拟实现与源码解读 1、Vue.use( )源码 源码位置：vue/src/core/global-api/use.js export function initUse (Vue: GlobalAPI) {//use方法的参数接收的是一个插件，该插件的类型可以是一个函数，也可以是一个对象Vue.use = function (plugin: Function | Object) {//_installedPlugins数组中存放已经安装的插件。const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))//判断一...