vue路由跳转方式及传参

一、 router-link 【实现跳转最直接的方法】

1. 不带参数

<router-link to='需要跳转到的页面的路径>
浏览器在解析时，将它解析成一个类似于 的标签。

父组件（params）：

<router-link :to="{name:'index', params: {id:1}}">  
// 路由配置 path: "/index/:id" 或者 path: "/index:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

子组件：

// html 取参  $route.params.id
// script 取参  this.$route.params.id

父组件（query）：

<router-link :to="{name:'index', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)

子组件：

// html 取参  $route.query.id
// script 取参  this.$route.query.id

二、this.$router.push() 【js方法内调用】

1. query传参
   父组件：

	 this.$router.push({
	        name: "payStyle",
	        query: {
	          orderTids: orderTids
	       }
	  }); 
	  或：
	  this.$router.push({
	        name: "path:'/payStyle'", 
	        query: {
	          orderTids: orderTids
	       }
	  }); 

子组件：

	mounted() {
	    let that = this;
	    that.orderTids = that.$route.query.orderTids;//接收父组件传过来的orderTids
    ｝

2. params传参

父组件：

	this.$router.push({
	        name: "payStyle", // 只能用 name
	        params: {
	          orderTids: orderTids
	       }
	  }); 

子组件：

	mounted() {
	    let that = this;
	    that.orderTids = that.$route.params.orderTids;//接收父组件传过来的orderTids
    ｝