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 时，我们就...
两种获取地址参数方法//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 = []))//判断一...
前言 通过B站视频和一些童鞋的文章结合GitHub源码阅读来理解路由的实现原理 看过前章vuex状态管理的分享之后，相信对路由这块也是非常感兴趣的，同样的模式，同样的方式，我们走进GitHub之vue-router 同样直接走进 srccomponents：route-link 组件 和 router-view 组件 实现 history：关于浏览器相关，包含 hash模式 , basic模式 ，html5模式 以及非浏览器模式以及go 、push 、replace 、back 等各自的处理方法 util：不用多说，各...
App.vue<template><div id="app">这是app.vue主页标题<router-view/></div> </template><script> export default {name: App } </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>router文件夹下的index.jsimport Vue from vue import Router from vue-router i...
我正在使用Vue.js开发应用程序SPA,我意识到当我调用import来使用Vue-router加载路由时,它正在加载所有内容. 我当前的代码：import Home from './components/Home/Home.vue'; import Product from './components/Product/Index.vue'; import Participant from './components/Participant/Index.vue';export const routes = [{path: '', component: Home, name: 'home',comments: {default: Home}},{path: '/product', component: Pr...