Vue 路由跳转总结

<div class = 'app'>  
	<router-view />
</div>

    1:  <route-link to="/login"> 
				<div></div>
		</route-link>

2:
	this.$router.push('/')

	router.push({
		path:"/login",
		query:{  }		
	})

3:

	字符串:   router.push('login')
	
	对象:  router.push( { path:' /login?url= ' + this.$route.path } )

	命名的路由:  this.$router.push( name:'user'  ,params:  {userID:123} )

	带查询参数， (变成 /backend/order?selected=2):  this.$router.push( { path:'/backend/order'  ,  query:{ selected : " 2" }  } ) 


设置查询参数 ： this.$http.post( "vl/user/select-stage" , { state: state } )
											.then( ( {data:{code , content } } ) =>{ 
									if( code == 0 ){ 
										//对象
									this.$router.push( { path: ' /home' })   
						}else  if（code == 10）{ 
						 	this.$router.push( { path:'/login' , query:{ stage: stage  } } ) 
						 }
			})   


设计 查询参数对象 : 

let queryData  = {} 
	if( this.$route.query.stage ){ 
	queryData.stage = this.$router.query.stage
} 
if( this.$route.query.url ){ 
	queryData.url = this.$route.query.url
}
this.$router.push( { path:'/my/profile '  , query:queryData } )

		this.$router.push( { path:" .home"  , replace:true} )  


this.$router.push( { path:'/coach ' + this.$route.params.id , query:queryData    } )

this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3, this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

方案一：
getDescribe(id) {
// 直接调用$router.push实现携带参数的跳转‘this.$router.push({
path: /describe/${id},
})

  this.$router.push({
          path: `/describe/${id}`,
        })

方案一，需要对应路由配置如下：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id
方案二：
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

   t

his.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

this.$route.params.id
方案三：
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
      path: '/describe',
      query: {
        id: id
      }
    })

对应路由配置：

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件: 这样来获取参数

this.$route.query.id