Vue入门笔记（二）——路由

1.说明

本文写的主要针对0.7.X版本的vue router。
官方介绍：
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
对比：
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

2.创建一个简单的路由

1）route-config.js

// 需要的路由关系一般都写在route-config.js文件中
//引入组件，Home和About是两个自定义的组件
import Home from './components/Home.vue'
import About from './components/About.vue'
//设置路由映射关系
export default {
	'home': {
		component: Home
	},
	'about': {
		component: About
	}
}

2）main.js

//前两个是引用了vue和vue-router组件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入router的设置
import routeConfig from './route-config'

//用它来表示，在vue项目中使用vue-router
Vue.use(VueRouter)

// 创建路由
const router = new VueRouter()
//映射路由
router.map(routeConfig)
//构建组件
const App = Vue.extend(require('./app.vue'))
//启动路由，将路由挂载到app.vue页面的id为app的dom下面
router.start(App, '#app')

3）App.vue

<template>
	<div id="app">
		<div class="row">
			<div class="col-xs-offset-2 col-xs-8">
				<div class="page-header">
					<h2>Router Demo - 01</h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-2 col-xs-offset-2">
				<div class="list-group">
					<!--在a元素上使用v-link指令跳转到指定路径-->
					<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
					<a class="list-group-item" v-link="{ path: '/about'}">About</a>
				</div>
			</div>
			<div class="col-xs-6">
				<div class="panel">
					<div class="panel-body">
						<!--用于渲染匹配的组件, 需要和a标签在同一个挂载的id下-->
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

3. 路由嵌套

嵌套路由和简单路由的差别也就是路径映射了

1）route-config.js

import Home from './components/Home.vue'
import About from './components/About.vue'
import News from './components/News.vue'
import Message from './components/Message.vue'

export default {
	'home': {
		component: Home,
		//设置Home页面中的路由
		subRoutes: {
			'news': {
				component: News
			},
			'message': {
				component: Message
			}
		}
	},
	'about': {
		component: About
	}
}

2）App.vue

template>
	<div id="app">
		<div class="row">
			<div class="col-xs-offset-2 col-xs-8">
				<div class="page-header">
					<h2>Router Demo - 02</h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-2 col-xs-offset-2">
				<div class="list-group">
					<!--使用指令v-link进行导航-->
					<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
					<a class="list-group-item" v-link="{ path: '/about'}">About</a>
				</div>
			</div>
			<div class="col-xs-6">
				<div class="panel">
					<div class="panel-body">
						<!--用于渲染匹配的组件-->
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

3）Home.vue

<template>
	<div>
		<h1>Home</h1>
		<p>{{msg}}</p>
	</div>
	<div>
		<ul class="nav nav-tabs">
			<li>
				<a v-link="{ path: '/home/news'}">News</a>
			</li>
			<li>
				<a v-link="{ path: '/home/message'}">Messages</a>
			</li>
		</ul>
				<!-- 标记Home -->
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				msg: 'Hello, vue router!'
			}
		}
	}
</script>

4. 0.7.X版本和2.X版本的比较

1）router.start 替换
0.7.X版本：
router.start({
template: ‘’
}, ‘#app’)
2.X：
new Vue({
el: ‘#app’,
router: router,
template: ‘’
})
2）router.map 替换
0.7.X：
router.map({
‘/foo’: {
component: Foo
},
‘/bar’: {
component: Bar
}
})
2.X：
var router = new VueRouter({
routes: [
{ path: ‘/foo’, component: Foo },
{ path: ‘/bar’, component: Bar }
]
})