10. vue-router路由

四、 vue-router路由

1. 简介

使用Vue.js开发SPA（Single Page Application）单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

参考

bower info vue-router
cnpm install vue-router -S

2. 基本用法

a.布局
b.配置路由

<script>
		//1.定义组件
		var Home={
			template:'<h3>我是主页</h3>'
		}
		var News={
			template:'<h3>我是新闻</h3>'
		}

		//2.配置路由
		const routes=[
			{path:'/home',component:Home},
			{path:'/news',component:News},
			{path:'*',redirect:'/home'} //重定向
		]

		//3.创建路由实例
		const router=new VueRouter({
			routes, //简写，相当于routes:routes
			// mode:'history', //更改模式
			linkActiveClass:'active' //更新活动链接的class类名
		});

		//4.创建根实例并将路由挂载到Vue实例上
		new Vue({
			el:'#itany',
			router //注入路由
		});
	</script>

<router-link to="/home">主页</router-link>

3. 路由嵌套和参数传递

传参的两种形式：
    a.查询字符串：login?name=tom&pwd=123
        {{$route.query}}
    b.rest风格url：regist/alice/456
        {{$route.params}}

4. 路由实例的方法

router.push()  添加路由，功能上与<route-link>相同
router.replace() 替换路由，不产生历史记录    

5. 路由结合动画