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. 引入路由插件          

<script src="vue.js"></script>    

<script src="vue-router.js"></script>

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

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

<script>
    const Index = {
		            template: `
		            <div>首页</div>
		        `
		        }
	 const Find = {
		            template: `
		            <div>发现</div>
		        `
		        }
	 const Nearby = {
		            template: `
		            <div>附近</div>
		        `
		        }
	const Order = {
		            template: `
		            <div>订单</div>
		        `
		        }
	const My = {
		            template: `
		            <div>我的</div>
		        `
		        }			
</script>

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

<router-view></router-view>
<nav>
    <router-link to="/">首页</router-link>
    <router-link to="/nearby">附近</router-link>
    <router-link to="/find">发现</router-link>
    <router-link to="/order">订单</router-link>
    <router-link to="/my">我的</router-link>
</nav>