欢迎加我技术交流QQ群 ：811956471
前言：前端的东西零碎、广泛，需要我们不断的去总结归纳，所以就这块做了一些总结，欢迎大家继续补充纠正。
特别注意：
1、path匹配路由传参只能用query去接收参数；
2、name匹配路由，params和query两者皆可，用哪个携带参数就用用哪个区接收；
3、query传参数会出现在地址栏，刷新当前页面参数不会丢失；
4、params传参不会在地址栏，刷新页面参数会丢失。
方法一：使用name来匹配路由，name匹配的是路由里面的name值。
// 路由
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
//跳转方法：
this.$router.push({
name: "Hello",
params: {name:'诸葛亮'}
// or：
query: {name:'诸葛亮'}
});
//在相应路由里接收 :
console.log(this.$route.params.name) // 诸葛亮
// or :
console.log(this.$route.query.name) // 诸葛亮
方法二：使用path来匹配路由，path匹配的是路由里面的path值、只能通过query来传递参数,
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
//跳转方法：
this.$router.push({
path: "/",
query: {name:'诸葛亮'},
});
在相应路由里接收 :console.log(this.$route.query.name) // 诸葛亮
方法三：动态路由传参数
如果原来组件被复用。此时组件的生命周期钩子不会再被调用。
可以用这样监听路由变化：
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
}
//也可以：
beforeRouteUpdate(to, from, next) {
// 对路由变化作出响应...
next()
}
// 基本语法：
// 路由：
const router = new VueRouter({
routes: [
// 动态路径参数；newsId、newsTitle
{ path:'/params/:newsId/:newsTitle',component:newPagw }
]
})
//声明式：
<router-link to="/params/198/新闻标题">params</router-link>
//编程式：
toInfo(newsId,newsTitle) {
this.$router.push(`/info/${newsId}/${newsTitle}`);
},
方法五：直接再跳转路径后面拼接参数，相当于query方法
示例： <router-link to="/GoodsInfo?a=1"></router-link>
在相应路由里接收 :console.log(this.$route.query.a)
