vuejs入门-路由初识（二）

这篇开始我们使用npm库：vue-cli的开发方式的深入开发

这次我们只说一个东西：vue的路由处理以及路由方案：vue-router;
路由是啥，就是跳转页面的导航处理【我的个人理解，不喜勿喷】。

传统方案很简单：关于
这里说白了就是告诉你怎么跳页面[从A页面到B页面的切换]

1.使用脚手架初始化项目：
vue init webpack pro

2.根据下图进行文件的增删：
项目结构

QQ截图20170716074819.png

index.html源码:
----------------------------------代码开始---------------------------------------

----------------------------------代码截止---------------------------------------

main.js源码:
----------------------------------代码开始---------------------------------------
import Vue from 'vue'
import VueRouter from 'vue-router'
import First from './components/First'
import Secod from './components/Secod'

Vue.use(VueRouter)

// 定义路由配置
const routes = [
{
path: '/',
component: First
},
{
path: '/secod',
component: Secod
}
]

// 创建路由实例
const router = new VueRouter({
routes
})

// 创建 Vue 实例
new Vue({
el: '#app',/* 对应index.html的div的id="app" */
data(){
return {
}
},
router
})
----------------------------------代码截止---------------------------------------

First.vue源码:
----------------------------------代码开始---------------------------------------

----------------------------------代码截止---------------------------------------

Secod.vue源码:
----------------------------------代码开始---------------------------------------

----------------------------------代码截止---------------------------------------