40 - 编程式导航-两种路由跳转方式

一. 编程式导航 - 基本跳转

问题: 点击按钮跳转如何实现?

编程式导航: 用JS代码来进行跳转

 两种语法:

        (1). path 路径跳转 (简易方便)

// 简写
this.$router.push('路由路径')

// 完整写法
this.$router.push({
    path: '路由路径'
})

        (2). name 命名路由跳转(适合 path 路径长的场景)

this.$router.push({
    name: '路由名'
})

{name: '路由名', path:'/path/xxx',component:xxx},

        (3). 代码示例

二. ​​​​​​编程式导航 - 路由传参 

问题:点击搜索按钮，跳转需要传参如何实现?

两种传参方式:

        查询参数 + 动态路由传参

两种跳转方式，对于两种传参方式都支持:

        (1). path 路径跳转传参

                        1. query传参

// 简写
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')

// 完整写法 (更适合传参)
this.$router.push({
    path: '/路径'，
    query: {
        参数名1: '参数值1'
        参数名2: '参数值2'
    }
})

//接收
$router.query.参数名

                        2. 动态路由传参(需要配路由)

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

// 完整写法
this.$router.push({
    path: '/路径/参数值'，
})


//接收
$router.params.参数名

// 配置路由
{path: '/search/:words?', component:Search}

                        3. 代码示例

 
        (2). name 命名路由跳转传参

                1. query传参

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

// 接收 
$router.query.参数名

                2. 动态路由传参(需要配路由)

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

// 接收 
$router.params.参数名

// 配置路由
{name:"search",path: '/search/:words?', component:Search},

                3. 代码示例

 

三. 总结

1. path 路径跳转

        (1). query传参

        (2). 动态路由传参(需要配置路由)

2. name 命名路由跳转

          (1). query传参

          (2). 动态路由传参(需要配置路由)