Vue.js路由的简单使用

---

更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页

---

一、什么是路由

路由（Router）是Vue.js的另一个精髓所在，它是vue的一个官方库，用于匹配路径和模块的关系。

二、一步步使用路由

2.1、在main.js中引入Vue-Router

一般来说vue已经自带了路由了，如果没有的话，可以使用npm下载路由

npm install -g vue-router

• 在main.js头部引入路由和使用路由

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

2.2、在index.html中使用路由导航和路由视图

路由导航由< router-link to="/url" >来完成，这相当于使用一个< a> 标签;而 路由渲染由来完成，所有路由导航后的模块都会在这里显示出来。

<div id="router1">
		<h1>使用路由</h1>
		<!-- 使用路由 -->
		<div style="color: red">{{message}}</div>
		<router-link to="/news">新闻</router-link>	
		<router-link to="/home">首页</router-link><br>
		 <!-- 路由渲染 -->
		<router-view></router-view>
</div>

2.3、在main.js中配置路由路径和路由器挂载实例

以上完成后，我们需要在main.js中配置路由的路径和路由器实例的创建和挂载：

// 用以作为路由的模块组件
var news = {
	template: '<span>我是新闻页</span>'
}

var home = {
	template: '<span>我是首页</span>'
}

//路由地址映射
var routes1 = [
	{path: '/news',component: news},
	{path: '/home',component: home}
]

//路由地址注册到路由器中
var myRouter = new Router({
	routes: routes1
})
//挂载路由到id为router1的实例上
new Vue({
	router: myRouter,
	data: {
		message: 'hello vue router'
	}
}).$mount('#router1')

以上写法还可以精简为：

var news = {
	template: '<span>我是新闻页</span>'
}

var home = {
	template: '<span>我是首页</span>'
}

var router1 = new Router({
	//配置路由关系
	routes: [
	{path: '/news',component: news},
	{path: '/home',component: home}
	]
})

//挂载路由
new Vue({
	router: router1,
	data: {
		message: 'hello vue router'
	}
}).$mount('#router1')

效果：