Vue——路由：query传参、动态路由传参、VueRouter、router、route之间的区别query传参： q

query传参：

query传参：就是把参数放在querystring字段中

一、<router-link> 标签跳转页面传值

1.使用对象

<router-link :to="{path:`/home`,query:{id:123,age:10,name:`karen`}}">返回首页1</router-link>

2.拼接字符串

 <router-link to="/home?id=123&age=20&name=karen">返回首页1</router-link>

二、编程式跳转页面传值

1.使用对象

this.$router.push({path:"/home",query:{id:123,age:10,name:`karen`}})

2.拼接字符串

this.$router.push("/home?id=123&age=20&name=karen")

在目标组件内接收获取数据：`this.$route`

this.$route绑定在组件原型链上的，路由信息对象，它有一些信息。

注意：在createed钩子函数之后的所有地方都可以接收获取数据，this.$route.query 如果没有query没有传参，就是undefined。

动态路由传参

定义：就是把参数放在pathname中，进行传参（也就是放在网址上）

//设计:
const router=new VueRouter({
	 routes:[
		 {path:"/home/:id",component:()=>import("./home.vue")},
		 {path:"/about",component:()=>import("./about.vue")}]
 })
 
 //2种传参:
 <router-link to="/home/123">go</router-link>
 this.$router.push({path:"/home",params:{id:123}})
// 如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
 
//在路由匹配的组件中获取数据:
mounted(){let paramsObj=this.$route.params}

案例（便于理解）：

注册组件：

具体代码

代码结果：

VueRouter、 router、 route区别

VueRouter是一个nodejs识别的模块包
route是路由匹配时,携带了一些信息的对象,包括path,params,hash,query等等信息
router是路由实例对象,包含了路由的跳转方法,钩子函数等等

Vue——路由：query传参、动态路由传参、VueRouter、router、route之间的区别