name + params 跳转页面

1
2
3
4
5
// 跳转页面-传参数
this.$router.push({ name:'anotherPage', params:{id:1}});

// 接收参数
this.$route.params.id

path + query 跳转页面

1
2
3
4
5
// 跳转页面-传参数
this.$router.push({ path:'/anotherPage', query:{id:1}});

// 接收参数
this.$route.query.id

区别

  • path的query传参的参数会带在url后边展示在地址栏(/anotherPage?id=1)，name的params传参的参数不会展示到地址栏
  • 由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否 params将无效，需要用 name 来指定页面

js 中如何获取路由参数

1
2
3
4
import router from "./router/index"

let query = router.app._route.query
let params = router.app._route.params