vue-router 静态路由

SPA （单页应用程序）

       只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。   浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

特点

速度：更好的用户体验，让用户在web app感受native app的速度和流畅，

·MVVM：经典MVVM开发模式，前后端各负其责。

·ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。

·路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

单页面应用中，视图的切换需要通过路由实现。

路由的特点

 在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。     

如 获取商品信息： http://www.baidu.com/#/getGoods

获取用户信息: http://www.baidu.com/#/getUser

前端路由根据#后内容的改变，而去请求不同的内容，但是实际访问的还是那个页面，因为#后不管如何改变，页面地址是不变的

注意，路由中path跟组件的一一对应

创建路由的过程

1. 引入路由插件          

   

2.定义组件  每个路由对应一个组件

仿美团底部导航，创建组件 ：  首页、发现、附近、订单、我的

3.定义路由表, 一个路径对应一个组件

var routes =[
	{
	    path:"/",
		component:Index
	},
	{
		path:"/find",
		component:Find
	},
	{
		path:"/nearby",
		component:Nearby
	},
	{
		path:"/order",
		component:Order
	},
	{
		path:"/my",
		component:My
	}
]

4.创建路由对象

var router = new VueRouter({
		            routes:routes,    //路由表
		            linkExactActiveClass: 'active'
		        })

5.将router放入new Vue中

var vm=new Vue({
		    el:"#app",
		    router
		})

6.模板

router-link自动转为a标签，对应的内容显示在router-view

    首页
    附近
    发现
    订单
    我的