Vue Router 中路由跳转和路由传参的方式

前段时间做项目的时候遇到了路由传参的问题，就整理了一下，主要来说说Vue中路由跳转和路由传参的问题

使用场景：点击按钮或者文字链接，可以跳转到另一个页面进行操作，例如从博客列表页面跳转到博客详情页面

一、路由跳转

路由跳转的方式有两种： router-link的to属性，或者$router.push()方法

先来说第一种

1. router-link组件

通俗来说，就是可以使用router-link组件进行页面的跳转，原理就是<router-link>默认会被渲染成一个 <a> 标签，进行跳转，在组件中可以通过绑定to属性来指定要跳转的链接；tag属性指本来的标签

<router-link :to="/foo"  tag="h2">Foo</router-link>

2.$router.push()方法

除了使用 <router-link>创建a 标签来定义导航链接，我们还可以借助router 的实例方法，通过编写代码来实现。
想要导航到不同的URL，则使用 router.push ()方法。这个方法会向history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击<router-link :to="...">等同于调用 $router.push(...)。

所以其实这两种方式的实现原理都是一样的，只是有不同的表现形式，一种是在模板中利用组件实现，另一种是在Vue生命周期函数中调用。

该方法的参数可以是一个字符串路径，或者是一个描述地址的对象。例如：

// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user' })

如果是对象形式的话，需要配置路由，地址：src/router/index.js，像这样

{
	path: 'home',
	name: 'home',
	component: home,
	meta: {
	title: '博客首页'
	},
},

二、路由传参

在Vue Router中，路由传参的方式同样有两种，分别是query和params。这两种方法都适用于上面路由跳转的两种方式，下面就给大家一一展示一下

1.query

传递参数：
方法1：

<template>
	<router-link
          :to="{
                  path: 'blogDetail',
                  query: { id: item.id, views: item.views }
                }"
          tag="h2"
        >{{ item.title }}
	</router-link>
</template>

方法2：

<template>
   <div class="header"  @click="handle(1,'标题1')">标题</div>
</template>
<script>
    export default {
        name:'List',
        data(){
            return{}
        },
        methods:{
             handle:function(id,view){
             	this.$router.push({  
					path: 'blogDetail', 
					query: { 
						id: item.id,
						views: item.views
		    		}
				})
            },
        }
    }
</script>

接收参数：

<template>
   <div>阅读人数：{{view}}</div>
</template>
<script>
export default {
        name:'listDetail',
        data(){
          return{
             /*接收参数*/           
             id:this.$route.query.id,
             view:this.$route.query.view,
          }
        },
        methods:{
        //这里面可以根据获取到的id进行获取相应数据
        }
    }
</script>

2.params

传递参数：
方法1：

<template>
	<router-link
          :to="{
                  name: 'blogDetail',
                  params: { id: item.id, views: item.views }
                }"
          tag="h2"
        >{{ item.title }}
	</router-link>
</template>

方法2：

<template>
   <div class="header"  @click="handle(1,'标题1')">标题</div>
</template>
<script>
    export default {
        name:'List',
        data(){
            return{ }
        },
        methods:{
             handle:function(id,view){
             	this.$router.push({  
					name: 'blogDetail', 
					params: { 
						id: item.id,
						views: item.views
		    		}
				})
            },
        }
    }
</script>

接收参数：

<template>
   <div>阅读人数：{{view}}</div>
</template>
<script>
export default {
        name:'listDetail',
        data(){
          return{
             /*接收参数*/           
             id:this.$route.params.id,
             view:this.$route.params.view,
          }
        },
        methods:{
        //这里面可以根据获取到的id进行获取相应数据
        }
    }
</script>

注意:

• 1.传递参数是用的$router 接收参数是用的$route
• 2.params传参，传递的参数只能是 name:'xxxx'，不能是path:'/xxx'；同理，query传参，传递的参数只能是path:'/xxx'，不能是 name:'xxxx'
• query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会在地址栏中显示