vue-router插件的使用

.vue-router插件的使用

+ 路由切换就是不断销毁和生成组件

+ 路由组件一般放置在views文件夹中

+ 配置路由一般放在router文件夹中 **一级路由**

  ```js
  // 配置路由
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  // 使用插件
  Vue.use(VueRouter)
  
  // 引入路由组件
  import Home from '@正在上传…重新上传取消正在上传…重新上传取消iews/Home'
  import Register from '@iews/Register'
  import Search from '@iews/Search'
  import Login from '@iews/Login'
  
  
  // 配置路由
  export default new VueRouter({
      routes:[
          {
              path:'/home',
              component:Home
          },
          {
              path:'/register',
              component:Register
          },
          {
              path:'arch',
              component:Search
          },
          {
              path:'/login',
              component:Login
          }
      ]
  })
  ```

  

+ 使用路由

  1. 在入口文件`main.js`引入路由，然后注册路由

  ```js
  import router from '@/router'
  
  new Vue({
    render: h => h(App),
    router
  }).$mount('#app')
  ```

  2. 路由出口:展示路由组件的地方

     ```html
     <template>
       <div>
         <Header></Header>
         <!-- 路由出口 -->
         <router-view></router-view>
         <Footer></Footer>
       </div>
     </template>
     ```

     + `<router-view></router-view>` 就是展示路由组件的入口

     

3. 重定向路由

   ```json
    {
    path:'*',
    redirect:'/home'
     }
   ```

4. 路由的跳转

   + 声明式跳转 `router-link`

     1. 本质是 **a** 标签，只是简单跳转的时候可以用

        ```html
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        ```

        + **to** 属性：跳转到哪个组件

   + 编程式跳转 `push|replace`

     1. 需要其他业务逻辑的时候，比如传参给其他路由

        + 在需要跳转的地方定义 **事件**

          ```html
          <button  type="button" @click="goSearch">搜索<tton>
          
          ```

        + 调用方法

          ```js
           methods:{
                  goSearch(){
                      this.$router.push('arch')
                  }
              }
          ```

          + 当我们注册路由之后 每个组件都有`$router` 属性 里面的 push | replace 方法可以帮助我们跳转到对应的了路由

            

        5. 路由原信息，自己定义的东西 **对象形式**

           ```js
           $route.meta //存放原信息
           ```

           + 里面存放的数据，非路由组件也能访问到

        

     + **路由传参**

       + 三种形式

         1. 对象形式

            ```js
             goSearch(){
                        this.$router.push({
                            name:'search',
                            params:{
                                keyword:this.keyword
                            }
                        })
                    }
            ```

            + 这种形式最好要在路由中定义name

              ```js
              {
                 name:'search',
                 path:'arch/:keyword',
                 component:Search,
                 meta:{isShow:true}
              }
              ```

              2. **字符串和模板字符串形式不做演示**

       + params参数

         1. 需要在路径上使用占位符

            ```js
              path:'arch/:keyword',
                        component:Search,
                        meta:{isShow:true}
            ```

         2. 存放在`$router.params`当中

       + query参数

         1. 类似于`ajax`中的GET传参?k=v的形式

         2. 存放在`$router.query`当中
+ 路由几个重要的点

  1. path 跳转不能和 params一起使用

  ```js
  goSearch(){
              // this.$router.push({
              //     name:'search',
              //     params:{
              //         keyword:this.keyword
              //     }
              // })
              this.$router.push({
                  path:"arch",
                  params:{
                     keyword: this.keyword
                  }
              })
  ```

  + 会报错的，必须结合name来使用

2. 如何指定params参数可传可不传

   + 如果params已经占位了，不穿的话URL会有问题

   + 解决方法

     在占位的时候在后面加一个问号

     ```js
     {
         name:'search',
         path:'arch/:keyword?',
         component:Search,
         meta:{isShow:true}
      }
     ```

3. 如果传一个空字符的解决方法

   ```js
   goSearch(){
               this.$router.push({
                   name:'search',
                   params:{
                       keyword:this.keyword || undefined
                   }
               })
       
4. 路由组件也可以传props

   + 有三种写法，因为不常用所以不写了

5. 重写push | replace 方法

   + 加入中断Promise的功能