Vue.js中的router基础(动态、传参、接参、编程式导航 )

前面是router的一级和二级路由,下面是路由里稍微复杂一点的东西:路由的动态,传参,接参。

这些个我们通过寺库网的分类页和分类页中每个类的详情的数据来做

寺库网:https://m.secoo.com

按照前面的,先配置好前面一篇的一级路由,但是稍微名字有些更改如下:

动态路由、路由传参:

1.先配置跨域方法:反向代理

• 在根目录建立vue.config.js文件,这个文件等价于webpack里的webpack.config.js
• 下载axios数据请求包

cnpm i axios -S

• 在vue.config.js里配置跨域

module.exports= {
    devServer : {
        proxy : {
            //分类页的数据代理
            '/siku' : {//标记
                target : 'https://android.secoo.com',
                changeOrigin : true,
                pathRewrite : {
                    '^/siku' : ''//作用在真实地址中去掉标记
                }
            },
            //详情页数据代理,由于这个做了反跨域,所以后面没用上,本应该在List.vue里使用的
            '/msiku': {
                target: 'https://m.secoo.com',
                changeOrigin: true,
                pathRewrite: {
                '^/msiku': ''
        }
      }
        }
    }
}

2.配置Category.vue这个组件

• 在 Category .vue组件里使用标记为/siku的跨域方案获取分类数据请求

<script>
export default {
  data () {
    return {
      category: null
    }
  },
  created () {
     this.$http.get('/siku/appservice/cartAndBrand.action',{//这里的/siku会自动匹配到对应的vue.config.js里的target
        params: {//这里面是接口数据里?后的内容参数
          v: 2.0,
          _: Date.now(),
          callback: 'jsonp1'
        }
      })
        .then( res => {
          this.category  = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
        })
        .catch( error => console.log( error ))
  }
}
</script>

<template>
  <div>
    <div class="category-box">
      <div 
        v-for = "item in category"
        :key = "item.value"
        class="food-box"
      >
        <h3> {{ item.name + item.enName }} </h3>
        <ul>
          <li 
            v-for = "category in item.child"
            :key = "category.value"  
          >
            <!-- 路由的传参 -->
            <router-link
              :to = "{name: 'list',params: { id: category.value},query: {keyword: category.name}}"
            >
              {{ category.name }}
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

可能样子有点丑来点css

<style lang="stylus" scoped>
  $color = 'red'
  .food-box 
    ul
      list-style none
      display flex
      justify-content space-around
      flex-wrap wrap
      padding 0
      li 
        padding 10px
</style>

最后出来个这么个鬼东西,有点丑,接下来是每个分类的详细了

3.再进一步配置一下index.js文件

• 让List.vue作为每个分类详情的组件

需要导入list.vue

import List from '../components/pages/List.vue'

路由表下的Cayegary下增加List的路由

{
      path : '/category',
      component : Category
},
{
      path : '/list/:id',
      component : List,
      name : 'list'
}

路由接参:

路由接参需要移步到List.vue组件里

<template>
  <div>
    <button @click = 'goCategory'>
      返回
    </button>
    <p>
      <!-- 通过$route接收前面传递过来的参数 -->
      id: {{ this.$route.params.id }}
    </p>
    <p>
      query: {{ this.$route.query.keyword }}
    </p>
  </div>
</template>

编程式导航

其后那个返回按钮设计到编程式导航

知识点(挂在了$router上):

• push

• ​​this.$router.push('/home')​​
• this.$router.push({name,params,query})
• push可以将我们的操作存放到浏览器的历史记录

• replace

• this.$router.replace('/home')
• this.$router.replace({name,params,query})
• replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级

<script>
export default {
    methods :{
        goCategory () {
            console.log(this.$router)//这上面挂载了以下方法
            /*
               push
            */
           //this.$router.push('./home')//结果跳到首页后,详情页的路由展示区域还在
           //this.$router.push('./category')//同样路由展示区域还在
           //    this.$router.push({//同样路由展示区域还在
           //        name : 'list',
           //        /* params,
           //        query */
           //})
           /*replace */
            // this.$router.replace('/login')//正常
            this.$router.replace({
            path : '/category'
            })//正常
            /*
              history的forward,go,back都可以
            */

        }
    }
}
</script>