【vue2.0】vue-router学习

作者: Keiko_Yen | 来源:发表于2017-07-25 17:57 被阅读68次

1.先新建一个vue项目
2.安装
npm install vue-router

3.main.js中添加代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

4.新建routers.js，引入组件home和Hello组件，新建routers对象并配置路由。

配置路由.png

path 配置了路由的路径，component 配置了映射的组件。

5.修改main.js

main.js.png

注意：
1.添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。

router.png

这个只能是router，不然报错 [Cannot read property 'matched' of undefined]。

资源链接贴
vue2.0英文文档vue2.0中文文档 vue-router英文文档vue-router中文文档 vuex英文文...
vue2.0高仿网易云音乐
技术栈 vue2.0 + vue-router + webpack + vuex + axios better-s...
vue模仿豆瓣APP
豆瓣APP 豆瓣电影，图书，音乐，广播，小组。vue2.0 + vue-router + axios + vuex...
Vue2.0实操经典文章整理
Vue2.0 探索之路——vue-router入门教程和总结 Vue2.0的三种常用传值方式、父传子、子传父、非父...
Vuejs2.0开发仿QQ音乐webpp案例分析
仿QQ音乐webapp是基于Vue2.0，vuex，vue-router，axios和html5的flexible...
【vue2.0】vue-router学习
1.先新建一个vue项目2.安装npm install vue-router 3.main.js中添加代码 4.新...
这些年使用的技术栈总结
Vue2.0：实现前端页面构建 Vuex：实现不同组件间的状态共享 Vue-router：页面路由切换,实现单页的...
学习链接
vue-router教程总结 vue生命周期和钩子函数详解vue生命周期 Vue2.0八——知识点整理 vuex...
vue-router的实现功能方式
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router...
Vuex 豆瓣电影项目实战
之前写过一个Vue2.0 豆瓣电影项目实战，项目地址GitHub。在此项目中使用了vue-router、axios...