VUE路由跳转、传参总结

路由跳转方式有哪些？

在Vue中，路由跳转主要有以下几种方式：

1. 使用router-link组件：

	<router-link to="/home">Home</router-link>

2. 使用编程式导航

// 字符串
this.$router.push('home')
 
// 对象
this.$router.push({ path: 'home' })
 
// 带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

3. 使用router.replace（无历史记录）：

this.$router.replace({ path: 'home' })

4. 使用router.go（前进或后退记录）：

// 前进一步
this.$router.go(1)
 
// 后退一步
this.$router.go(-1)

5. 在导航守卫中进行跳转：

router.beforeEach((to, from, next) => {
  if (需要跳转) {
    next('/about')
  } else {
    next() // 继续当前导航
  }
})

路由传参的方式有哪些？

路由传参有以下维度要选择

1.传递信息类型

参数类型一般有两种字符串或者对象

2.载体

路由传递参数的载体只有两个query和params。

3. 编写方式

编写方式有两种：

1. 使用声明式导航 router-link组件
2. 使用编程式导航

4.跳转目标

1. path
2. name

以上有四个维度，每个维度又有各种选择，所以组合起来 有16种路由传递参数的方式。但是有一些情况不能使用。

枚举出所有的情况

使用载体params 和 传递参数类型是对象

1.（无法使用！！！）使用方式router-link，目标使用path

<router-link :to="{ path: '/home', params: { id: 1 } }" />
//  如果载体是params，传递数据是对象，只能使用name配置项，不能使用path配置项

2.使用方式router-link，目标使用name

<router-link :to="{ name: 'home', params: { id: 1 } }" />

3.（无法使用！！！）使用方式使用编程式导航，目标使用path,

this.$router.push({ path: '/home', params: { id: '1' } }) 
// 如果载体是params，传递数据是对象，只能使用name配置项，不能使用path配置项

4.使用方式使用编程式导航，目标使用name

this.$router.push({ name: 'home', params: { id: '1' } }) 

使用载体query 和 传递参数类型是对象

5.使用方式router-link，目标使用path

<router-link :to="{ path: '/home', query: { id: 1 } }" />

6.使用方式router-link，目标使用name

<router-link :to="{ name: 'home', query: { id: 1 } }" />

7.使用方式使用编程式导航，目标使用path,

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

8.使用方式使用编程式导航，目标使用name

this.$router.push({ name: 'home', query: { id: '1' } }) 

使用载体params 和 传递参数类型是字符串

9.使用方式router-link，目标使用path

//路由参数配置
const router = new VueRouter({
  routes: [{
    path: '/about/:id',
    component: User
  }]
})
//声明式导航使用
// params 不能与 path 一起使用
 // 错误的写法
<router-link to="{path : '/about',  params: { id: 1 } }">跳转</router-link>
// 正确的写法
<router-link to="{path : '/about/1' }">跳转</router-link> 

10.使用方式router-link，目标使用name

//路由参数配置
const router = new VueRouter({
  routes: [{
    path: '/about/:id',
    component: User
  }]
})
//声明式导航使用
<router-link to="{name : 'about',  params: { id: 1 } }">跳转</router-link>

11.使用方式使用编程式导航，目标使用path

//路由参数配置
const router = new VueRouter({
  routes: [{
    path: '/about/:id',
    component: User
  }]
})
this.$router.push({ path: 'about/1', })

12.使用方式使用编程式导航，目标使用name

//路由参数配置
const router = new VueRouter({
  routes: [{
    path: '/about/:id',
    component: User
  }]
})
this.$router.push({ name: 'about', params: { id: '001' } })

使用载体query 和 传递参数类型是字符串

13.使用方式router-link，目标使用path

<router-link to="/home/detail?id=1">

<router-link :to="{ path: '/home', query: { id: 1 } }" />

14.使用方式router-link，目标使用name

<router-link :to="{ name: 'home', query: { id: 1 } }" />

15.使用方式使用编程式导航，目标使用path,

this.$router.push({ path: '/home?id=1'}) 
this.$router.push({ path: '/home', query: { id: '1' } }) 

16.使用方式使用编程式导航，目标使用name

this.$router.push({ name: 'home', query: { id: '1' } }) 

哪些情况下路由传递的参数刷新页面会丢失？

1.使用了params的载体的情况

2.使用了query载体的情况

如果传的是字符串，刷新页面后数据是不会丢失的，但是的是对象或者是数组，那么刷新后，页面的数据就会丢失。