路由进阶--编程式导航（在Vue路由中实现跳转，跳转传参）

路由进阶--编程式导航（跳转，跳转传参）

文章目录

路由进阶--编程式导航（跳转，跳转传参）
- 1、编程式导航
- - 1.1、基本跳转
  - 1.2、跳转传参

1、编程式导航

1.1、基本跳转

需求：点击按钮跳转如何实现?

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

path 路径跳转（简易方便)

javascript 复制代码

this.$router.push('路由路径')     //方式1

this.$router.push({     //方式2
   path:'路由路径'
})

通过命名路由的方式跳转 (需要给路由起名字) 适合path路径长的情况

javascript 复制代码

const router = new VueRouter({
  routes: [
    { name: 'search', path: '/search/:words?', component: Search },
  ]
})

javascript 复制代码

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

示例：

vue 复制代码

<template>
	<button @click="goSearch">搜索一下</button>
</template>

<script>
export default {
  name: 'FindMusic',
  methods: {
    goSearch () {
      // 1. 通过路径的方式跳转
      // (1) this.$router.push('路由路径') [简写]
      // this.$router.push('/search')

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

      // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
      //    this.$router.push({
      //        name: '路由名'
      //    })
      this.$router.push({
        name: 'search'
      })
    }
  }
}
</script>

1.2、跳转传参

需求：点击搜索按钮，跳转需要传参如何实现?

两种传参方式：查询参数，动态路由传参

path 路径跳转传参(query传参，动态路径传参)

query传参：

javascript 复制代码

    (1)
	this.$router.push('路由路径') [简写]
    this.$router.push('路由路径?参数名=参数值')
	//跳转到其他页面接收：$router.query.参数名

    (2) 
	this.$router.push({    // [完整写法] 更适合传参
    path: '路由路径'
    query: {
       参数名: 参数值,
       参数名: 参数值
      }
    })
    //跳转到其他页面接收：$router.query.参数名

动态路径传参：

javascript 复制代码

  this.$router.push({
      name: '路由名'
      query: { 参数名: 参数值 },
      params: { 参数名: 参数值 }
  })
  //跳转到其他页面接收：$router.params.参数名    (动态传参就需要配置路由，例如下列代码)
// const router = new VueRouter({
//   routes: [
//     { name: 'search', path: '/search/:参数名?', component: Search }
//   ]
// })

name命名路由跳转传参

query传参：

javascript 复制代码

 this.$router.push({
     name: '路由名'
     query: { 参数名: 参数值 }
 })
    //跳转到其他页面接收：$router.query.参数名

动态路径传参：

javascript 复制代码

 this.$router.push({
     name: '路由名'
     params: { 参数名: 参数值 }
 })
//跳转到其他页面接收：$router.params.参数名    (动态传参就需要配置路由，例如下列代码)
// const router = new VueRouter({
//   routes: [
//     { name: 'search', path: '/search/:参数名?', component: Search }
//   ]
// })