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

1、编程式导航

1.1、基本跳转

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

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

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

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

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

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

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

   示例：

   <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、跳转传参

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

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

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

   query传参：

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

   动态路径传参：

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

2. name命名路由跳转传参

   query传参：

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

   动态路径传参：

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