vue路由传参【vue路由原理、区别】

vue的路由传值主要通过 query 和 params 来实现

方法1、query

query传参就是在url地址后面拼接 ?参数名=参数值

优点：通用性比较好，刷新数据不会丢失

例如 rourer-link to=”/goods?id=1001”

this.$router.push({path:'home',query:{name:'张三',id:'a1dff45'}) 
//还有个简单的写法
this.$router.push('/home?id='+ 1234 +'&type='+ true) 
//这两种方法会把页面存储在内存栈里

//如果你要写支付页面，支付完不在返回这个待支付页面，就可以使用
this.$router.replace({ path: '/home' }) //删档跳转
//会把当前页面替换掉，返回就是上一页面了，他的传参方式和上面一样
//也可以在成功回调里使用
this.$router.go(-1) //负数后退，正数前进

//他们的获取方式都一样，
this.$route.query 

注意这里的route 没有 r 不然你会得到 undefined
他们的作用
route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；
routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；
router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

query路由的实现原理

利用H5的history API实现 主要通过history.pushState 和 history.replaceState来实现，不同之处在于，pushState会增加 一条新的历史记录，而replaceState则会替换当前的历史记录

方法2、params

params传参就是在url地址后面拼接 /id=参数值

优点：传递数据量大的话地址栏美观

缺点：刷新页面值会丢失

例如：rourer-link to=”/goods/1001”

//注意这里不能使用path，用name，否则获取不到值
this.$router.push({ name: 'home',params:{id:12222,name:'张2'}})

//如果你不想值丢失的话需要在路由的path里加 （官方称为动态路由）
{
	path: '/home/:id/:name'，
 	name:'home'，
 	component: (resolve) => require(['@/components/home'], resolve),
}

//取值
this.$route.params

params路由实现原理

利用url的hash实现，我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，路由里的 # 不叫锚点，我们称 之为 hash，主要利用监听哈希值的变化来触发事件 —— hashchange 事件来做页面局部更新 总结：hash 方案兼容性好，而H5的history主要针对高级浏览器