Vue-路由-编程式导航

1. path 路径跳转传参

1.1 query传参

方式一：

// 不传参
this.$router.push('路由路径')
// 如：
// this.$router.push('/search')
// 传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')

方式二：

// 不传参
this.$router.push({
  path: '路由路径'
})
// 如：
// this.$router.push({
//   path: '/search'
// })

// 传参
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

接收参数方式：

$route.query.参数名
// 如果js中接收需要加上this
this.$route.query.参数名

1.2 动态路由传参

这里路由为在还是需要配置动态路由:key

path: '/search/:words?', //如果不传参数，也希望匹配，可以加个可选符 "?",如：这里的words后面的 ？

方式一：

this.$router.push('/路径/参数值')

方式二：

this.$router.push({
  path: '/路径/参数值'
})

接收参数方式：

$route.params.参数名
// 如果js中接收需要加上this
this.$route.params.参数名

2. name 命名路由跳转传参

2.1 配置路由的名称

{ name: '路由名', path: '/path/xxx', component: XXX },
// 如：
// { name: 'searchcc', path: '/search/:words?', component: Search },

2.2 query传参

// 不传参
this.$router.push({
  name: '路由名'
})

// 传参
this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

接收参数方式：

$route.query.参数名
// 如果js中接收需要加上this
this.$route.query.参数名

2.3 动态路由传参

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

接收参数方式：

$route.params.参数名
// 如果js中接收需要加上this
this.$route.params.参数名