vue常见路由跳转的几种方式小结

/* 不带参数 */
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
// 更建议用name
// router-link链接中，带'/' 表示从根路径开始，不带 表示从当前路由开始
/* 带参 */
// 1. params传参
<router-link :to="{name:'home', params: {id:1}}">
// 路由配置 用 path: "/home/:id" 或者 path: "/home:id"
// 配置path，刷新页面参数保留；不配置path，刷新页面后 参数会消失
// html 取参 $router.params.id
// script 取参 this.$router.params.id
// 2 query传参
<router-link :to="{name:'home', query: {id:1}}">
// 路由可不配置
// html 取参 $router.query.id
// script 取参 this.$router.query.id

/* 不传参 或 query传参 */
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home', query: {id:'1'}})
/* params传参 */
this.$router.push({name:'home', params: {id:'1'}})
this.$router.push({path:'/home', params: {id:'1'}})
//注： params传参只能用name
//配置path，刷新页面参数保留；不配置path，刷新参数消失
/* query和params的区别 */
// query类似于 get 请求，跳转后页面url会拼接参数，如?id=1。-->适用于 非重要的参数
// params 类似于post，不拼接参数，刷新页面后参数消失。--->适用于 安全性较高的参数，如密码
 

import router from '@/router';