Vue中的路由导航

一，声明式导航是写在template标签里，通过<router-link></router-link>标签来触发

二，编程式导航通过组件实例在method方法里使用this.$router.push(xxx)，然后通过元素一定操作来调用该方法触发路径实现路由跳转。

最常用的方法

1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)   ==>> 队列的方式（先进先出）
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)    ==>> 栈的方式（先进后出）
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由

<template>
	<div class="col-xs-offset-2 col-xs-8">
		<div class="page-header">
			<h2>Vue Router Demo</h2>
			<button @click="back">后退</button>
			<button @click="forward">前进</button>
			<button @click="test">测试一下go</button>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Banner',
		methods:{ 
			back(){ 
				this.$router.back()
			},
			forward(){
				this.$router.forward()
			},
			test(){
				this.$router.go(3)
			}
		},
	}
</script>

三，params参数和query参数

•  params参数：属于路径当中的一部分，需要注意配置路由的时候需要占位
• query参数：不属于路径当中的一部分，类似于Ajax中的queryString,配置路由不需要占位

传递的三种方法：

 1）字符串形式

  通过params参数传递时在路由配置里path要注意占位然后通过编程式导航传递参数

可以看到此时我们的组件已经拿到了需要传递的参数，我们通过$route.params.keyword或$router.query.keyword就的到了传递的参数

 2）模板字符串（个人觉得相对第一种更方便一些）

3）对象形式（最常用）

使用对象方法首先要对路由进行命名this.$router.push(name:"路由名称(search)",params:{传参},query：{传参}:)。

• 特别注意：以对象方式传参时，如果我们传参中使用了params，只能使用name，不能使用path，如果只是使用query传参，可以使用path。