Vue-路由

1. 安装路由

     npm install vue-router  --save    //安装vue-router路由,  
   

2.项目中导入router路由

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

3.创建路由

     const router = new VueRouter({
    	    		routes : {
    	    			{path:"/page1",component:ShowPage1},
    	    			{path:"/page2",component:ShowPage1},
    	    			{path:"/匹配链接路径/:参数",component:对应需要跳转的模块},使用：+参数来传递参数
					},
    	    		mode :  "history"   //去掉链接地址处的"#/"
    	    	})

4.使用

    new Vue({
    	router : router,  //绑定上方创建的路由
    })

5.设置显示区域

	<router-view></router-view>

6.路由设置链接

<router-link to=''"></router-link>  //to属性对应链接地址
// 如果想传递参数的话  需要通过v-bind:to=" '/链接地址/'+传递参数   "

7.向服务端发送请求的方法

1.			this.$http.get('/链接地址'+链接id，{传递参数}).then(function(返回参数){
		
			})

如何获取路由里面传递的参数

this.$route.params.传递的参数 

Vue-Router 中的 $route 和 $router

$route表示当前路由信息对象

this.$route.path      //对应当前路由的路径，解析为绝对路径
this.$route.params.*   //一个key/value对象，包含了动态片段和全匹配片段，*为对应传递的路由参数，如果没有路由参数，就是一个空对象。
this.$route.query.*  //表示url查询参数
//详细内容可直接控制台打印出来this.$route的值

$router对象，
全局的路由实例，是router构造方法的实例，在vue内部，可以直接通过$router来访问路由实例
需要使用Vue.use(VueRouter) 来进行全局挂载路由实例。
1. `this.$router.push()  //等同于<router-linke :to=" ">,跳转到不同的url  push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面`
  	 this.$router.push('home')  // 字符串
	 this.$router.push({ path: 'home' })// 对象
	 this.$router.push({ name: 'user', params: { userId: 123 }})// 命名的路由
     this.$router.push({ path: 'register', query: { plan: '123' }})// 带查询参数，变成 /register?plan=123
2. this.$router.go(-1)   //页面路由跳转，前进或者后退
3. this.$router.replace('/')   //页面替换，不会向history栈添加新的记录。