vue2.0配置路由

配置路由之前，先检查vue版本，（案例适用vue2.0）

采用npm包的形式进行安装。

安装路由依赖：npm install vue-router（代码中，如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能）

更新一下 vue-cli：npm update vue-cli

一、使用路由
在main.js中，需要明确安装路由功能：

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './App.vue'

Vue.use(VueRouter)

1.定义组件，两种方式：

方式(1):从其他文件import进来

import index from './components/index.vue'

import hello from './components/hello.vue'

另一种方式(2)直接在js文件创建组件：如下：

//创建组件

　　var index={
　　　　template:'<h3>我是主页</h3>'
　　};

　　var hello={
　　　　template:'<h3>我是主页</h3>'
　　};

2.定义路由

const routes = [

    { path: '/index', component: index },

    { path: '/hello', component: hello },

]

3.创建 router 实例，然后传 routes 配置

const router = new VueRouter({

  routes

})

4.创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能

const app = new Vue({

    router,

    render: h => h(App)

}).$mount('#app')

经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>

那么这个App.vue里应该这样写：

<template>

  <div id="app">

        <router-view></router-view>      <!-- 路由匹配到的组件将渲染在这里 -->

  </div>

</template>
<router-link to="/goods">主页</router-link>      <!--在vue-router 2中，使用了<router-link></router-link>实现路由跳转-->

index.html里呢要这样写：

<body>

    <div id="app"></div>

</body>

这样就会把渲染出来的页面挂载到这个id为app的div里了。

实例演示：
app.vue 页面代码：

<template>

<router-view></router-view>

</div>

</template>

main.js代码：

//main.js是入口js
import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';//VueRouter是一个变量，

Vue.config.productionTip = false

Vue.use(VueRouter);//如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

//组件
var Goods={
template:'<h3>我是主页</h3>'
};
//定义路由
const routes = [
{ path: '/goods', component: Goods },

]

//创建 router 实例，然后传 routes 配置
const router = new VueRouter({
routes
})

//创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')

嵌套路由：

// 定义路由如下：

const routes = [

{ path: '/', redirect: '/home' },

　　{

　　 path: '/home',

　　 component: Home,

　　 children:[

　　 { path: '/home/login', component: Login},

　　 { path: '/home/reg', component: Reg}

　　 ]

　　},

{ path: '/news', component: News}

]

参考：http://www.jb51.net/article/106326.htm

报错：

router.map is not a function

用的是vue2.0，配置路由时，vue中不识别vue1.0中的map

Cannot read property 'component' of undefined （即vue-router 0.x转化为2.x）

vue项目原本是用0.x版本的vue-router，但是却报出：Cannot read property 'component' of undefined

这是因为版本问题，由于vue2删除了vue1的内部指令，而vue－router1.x依赖vue的一个内部指令

参考：http://www.jianshu.com/p/cb918fe14dc6
　　   http://blog.csdn.net/m0_37754657/article/details/71269988