Vue-router路由跳转的两种方式与路由传参的方法

路由的两种跳转方式

路由跳转有两种方式：声明式和编程式。
我们之前用的< router-link :to="…">< /router-link>创建 a 标签来定义导航链接属于声明式。我们还可以借助 router 的如下这些实例方法创建编程式导航:

router.push

router.push(…)它就等同于< router-link :to="…">
router.push(…)这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

//字符串
router.push('home')

//对象
router.push({path:'home'})

//命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = '123';
router.push({ name: 'user', params: { userId }})    // ->    /user/123

router.push({ path: `/user/${userId}` })  // ->    /user/123

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 一一 替换掉当前的 history 记录。

设置 replace 属性（默认值: false）的话，当点击时，会调用router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。加上replace: true后，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

这个方法的参数n是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

router、routes、route的区别

1.router：指的是路由实例。如：路由编程式导航的this.$ router.push( )也能进行跳转，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$ router.back()就会回退之前的url。而this.$router.back(-1)就是返回上一个路由。

2.routes：指创建路由实例的配置项。用来配置多个route路由对象。routes出现在router文件夹下的index.js文件里，如下图:

就是我们在routes里进行路由配置，我们发现routes里对象里的component属性值既可以写成组件名，也可以直接( )=>import路径写入，这两种写法都是可以的，只不过后一种方法就不用再在上面单独import…from…引入了。

3.route：路由对象。如：this.$route指的就是当前路由对象，可以从对象里面获取name,path,params,query,hash等。

动态路由(路由传参)

动态路径参数，使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。你可以在一个路由中设置多段“路径参数”，对应的值都会设置到$route.params中。例如：

动态路由很适合用于类似商品详情页的需求，商品详情页的页面结构都一样，只是商品id的不同，然后id不同，详情页渲染出的结果不一样，所以这个时候就可以用动态路由。

router文件夹下的index.js里配置动态路由

goods组件里

在浏览器地址栏中输入/goods/123

深入了解路由传参方法

现有如下场景 点击当前页的某个按钮跳转到另外一个页面里面去，并将某个值带过去。

第一种方法：params传参，url中会显示参数， 页面刷新数据不会丢失。

需要在routes里对应路由配置如下：

可以看出需要在path中添加/:id来对应 $router.push中path携带的参数。在子组件中可以使用this.$route.params.id来获取传递的参数值。

第二种方法：params传参，url中不会显示参数， 页面刷新数据会丢失。

定义路由时添加name属性给映射的路径取一个别名，在router文件夹的index.js文件修改router如下：

在父路由组件上使用router-link进行路由导航，使用 <router-link :to="{name:‘home’,params:{id:001}} > 形式传递参数。注意 ': to= ’ 前面的冒号，childOne.vue组件修改如下：

子路由组件页面获取父路由传参方式不变，reg.vue 文件如下：

上述这种利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失。

第三种方法：query传参，url中会显示参数

使用path来匹配路由，然后通过query来传递参数，这种情况下query传递的参数会显示在url后面?id=？

对应路由配置如下：

对应子组件里用this.$route.query.id来获取参数值。
再来看个用query传参的例子:
定义路由 router>index.js文件如下：

修改路由导航 < router-link :to="{path:’/one/log’,query:{num:123}}"> ，childOne.vue 文件修改如下：

子路由组件通过 this.$route.query.num 来显示传递过来的参数，reg.vue 文件如下：

默认为hash模式，最明显的标志是，URL上有#号localhost:8080/#/，路由会监听#后面的信息变化进行路由匹配另一种为history模式，不会有#出现，很大程度上对URL进行了美化。需要注意的是history模式在打包后的路由跳转需要服务器配合。

params与query传参有何区别?

query 传参配置的是path，而params传参配置的是name，在params中配置path无效。query在路由配置不需要设置参数，而params必须设置。query传递的参数会显示在地址栏中，params传参刷新会无效，但是query会保存传递过来的值，刷新不变 。
一般来说，我们项目开发中就用第一种方法或第三种方法来传递参数。