vue路由跳转

vue中跳转方式为组件<router-link>和this.$router.push两种，传参方式为query和params两种。

1. 无参数

<!-- 路由 -->
{
  path: '/',
  name: home,
  components: Home
},
{
  path: '/detail',
  name: detail,
  components: Detail
}


//第一种：通过name跳转
<router-link to="detail"></router-link>
this.$router.push('detail')

//第二种：通过path跳转
<router-link to="/detail"></router-link>
this.$router.push('/detail')

2. 有参数（有query和params两种传参方式）

（1） query传参（类似于get请求，把参数拼接到地址中）

<!-- 路由 -->
{
  path: '/',
  name: home,
  components: Home
},
{
  path: '/detail',
  name: detail,
  components: Detail
}


//第一种：通过name跳转
<router-link :to="{name: 'detail', query: {id: 11, name: 'swq'}}"></router-link>
this.$router.push({name: 'detail', query: {id: 11, name: 'swq'}})

//第二种：通过path跳转
<router-link :to="{path: '/detail', query: {id: 11, name: 'swq'}}"></router-link>
this.$router.push({path: '/detail', query: {id: 11, name: 'swq'}})

// http://localhost:8082/#/detail?id=11&name=swq

<!-- 接收参数 -->
this.$route.query.id //11
this.$route.query.name //swq
this.$route.query //{id: 11, name: 'swq'}

（2） params传参（类似于post请求，如果定义路由时后面带参数则显示，否则不显示）

情况一：不在地址栏显示参数
<!-- 路由 -->
{
  path: '/',
  name: home,
  components: Home
},
{
  path: '/detail',
  name: detail,
  components: Detail
}

//第一种：通过name跳转
<router-link :to="{name: 'detail', params: {id: 11, name: 'swq'}}"></router-link>
this.$router.push({name: 'detail', params: {id: 11, name: 'swq'}})

//第二种：通过path跳转
<router-link :to="{path: '/detail', params: {id: 11, name: 'swq'}}"></router-link>
this.$router.push({path: '/detail', params: {id: 11, name: 'swq'}})

// http://localhost:8082/#/detail

情况二：在地址栏显示参数
<!-- 路由  -->
{
  path: '/',
  name: home,
  components: Home
},
{
  path: '/detail/:id/:name',
  name: detail,
  components: Detail
}

//只能通过name跳转，不能通过path跳转
<router-link :to="{name: 'detail', params: {id: 11, name: 'swq'}}"></router-link>
this.$router.push({name: 'detail', params: {id: 11, name: 'swq'}})


// http://localhost:8082/#/detail/11/swq

<!-- 接收参数 -->
this.$route.params.id //11
this.$route.params.name //swq
this.$route.params //{id: 11, name: 'swq'}