vue2.0和vue1.0路由对比以及脚手架初始路由分析
2.0新版本路由相比1.0在使用上做了一些改动，但核心思想并未改变，接下来稍作分析和对比，使用路由之前都需要引入vue-router.js文件
一、两个路由版本的初步分析
1.0
.js
/*1.创建根组件 必须得要有一个根组件*/
var app = Vue.extend();
/*2.创建路由对象*/
var router = new VueRouter();
/3.创建模板 注意通过Vue.extend创建，也可以从外部导入*/
var home = Vue.extend({
template:'首页
aaaaa
'
});
var music = Vue.extend({
template:'音乐
'
});
var singer = Vue.extend({
template:'歌手
'
});
/*4.配置路由 每一个锚点对应哪个模板*/
router.map({
'home':{component:home}, //如果是home锚点。就会把指定的组件，放入到占位符当中
'music':{component:music},
'singer':{component:singer}
});
/*重定向设置默认跳转路由 这里默认从根路由跳转到路由home*/
router.redirect({
'/':'/home'
});
/*5.开启路由 配置完成路由之后需要手动开启路由*/
router.start(app,'#app') 注意参数：上面创建的根组件app和要挂载到的html
.html
<div id="app">
<li><a v-link="{path:'/home'}">首页a>li>
<router-view>router-view>
div> 2.0
.js
//1.创建模板 可以从其他文件 import 进来
const home = {
template:'#home_tpl'
};
const music = {
template:'音乐
'
};
const singer = {
template:'歌手
'
};
/*2.配置路由 以及子路由*/
const routes = [ //在锚点之前必须得要加上"/"
{path:'/home',component:home,
children:[
{path:'login',component:music}, /*在子路由当中不要添加“/”*/
{path:'regist',component:singer},
]
},
{path:'/music',component:music},
{path:'/singer',component:singer},
//默认路由
{path:'/', redirect:'/home'}
];
/*3.创建路由对象 把上一步创建的routes添加进来*/
const router = new VueRouter({routes});
/*4.使用路由 也要挂载根实例*/
new Vue({
router,
el:'#app'
});
.html
<div id="app">
<router-link to="/home">首页router-link>
<router-view>router-view>
div>二、vue cli脚手架路由分析
脚手架生成vue项目的过程在这里不在详细说明，大体过程是：
1、安装node.js 官网可下载 进行傻瓜式安装，安装完成后会默认会一起安装npm，命令行输入node -v和npm -v出现相应版本即安装成功
2、npm install vue-cli -g 用npm进行全局安装vue-cli
3、vue init webpack 项目名
4、cd 项目名
5、npm install
6、npm run dev
项目会自动跑起来，但可能会出现端口号占用的情况，我们可以在config目录里的index.js文件中换掉默认的8080端口或者是命令行执行
命令一：netstat -ano|findstr 8080 （找到占用8080端口的程序，把下面命令二中的#换成输入命令一后出现的LISTENING后面的一串数字，即可解除本端口占用）
命令二：taskkill /pid #### /f 这里的脚手架用的是2.0版本，下面主要分析一下自动生成的初始文件：
我们主要在src目录下面写代码，先来看main.js也就是入口文件，我们都会从这里先下手
1、main.js
import Vue from 'vue'//导入vue，默认是从node_modules目录里面的vue目录下的dist文件夹里寻找同名js文件并导入的。具体导入的是什么不做具体说明，这里我们理解为一个必须要导入的核心文件
import App from './App'//导入本目录下的APP.vue文件 也就是上面图中main.js上面的APP.vue，./代表本层目录下
import router from './router'//我们在用脚手架生成项目时有提示选项要不要
安装路由router模块，回车的话代表安装，这里导入的是本层目录下router文件夹中
的index.js文件，这个index.js文件主要用来配置路由，后面详说，也就是这个
main.js文件并不处理和配置路由，他只需要导入专门处理路由的js文件就好了。
Vue.config.productionTip = false
//使用路由并挂载实例
new Vue({
el: '#app',
router,//把导入的路由文件也就是上面的router文件夹下的index.js拿进来
template: '我们总结一下这个main.js文件到底干了一件什么事，导入全局的路由并把路由挂载在APP.vue组件上，让路由在这个组件上全局生效可用，好了。
2.router/index.js
我们把所有和路由相关的东西，包括路由要依赖的js文件，配置的路由等等都放在这个文件里，条理清晰。
import Vue from 'vue'
import Router from 'vue-router'//默认导入node_modules/vue-router/dist/vue-router.js文件，也就是导入我们使用路由功能时要依赖的js文件
import Hello from '@/components/Hello'//导入components下面的Hello.vue文件，也就是组件
Vue.use(Router)//我们导入依赖的路由文件后要注册使用
export default new Router({
//创建路由对象并配置路由，顺便把路由实例对象暴露出去以便其他文件引入
routes: [
{
path: '/', //当路由地址为根地址时访问的就是Hello.vue文件
name: 'Hello',
component: Hello//导入的Hello.vue组件
}
]
})
3.APP.vue
这个组件相当于一个父组件，全局的路由上面介绍过就是挂载在这个文件中的，组件一般都包括三部分template，script，style对应结构 行为和样式。
<template>
<div>
<img src="./assets/logo.png">
<router-view>router-view>挂载在哪 哪里就要写这个占位标志<-->
div>
template>
<script>
export default {
name: 'app'
}
script>
<style>
style>
4.index.html
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">div>
我们的全局路由就是挂载在这个id为app的元素上的<-->
body>
html>