vue-router 进阶

vue-router 进阶

1.动态路由

​ url中路由是改变的，但是改变路由公用一个组件

举例：

1. http://localhost:8080/category/detail/001?a=1&b=1
2. http://localhost:8080/category/detail/002?a=2&b=2
3. http://localhost:8080/category/detail/003?a=3&b=3

页面中的配置：

<router-link class="nav-link " active-class='active' href="#" 

:to="{name:'detail',params:{id:'001'},query:{a:1,b:1}}"	//在router-link标签里面设置

>数码</router-link>

路由配置（这里是二级路由）

 {
        path: '/category',
        component: Category,
        children: [{
            path: 'detail/:id', //:id表示可以匹配/category后的所有参数,
            //举例：http:localhost:8080/category/001?a=1&b=2hash=3 那么:id就代表001开始往后的部分
            component: Detail,
            name: 'detail'		//这里是命名路由
        }]
    },

注意：由于动态路由url中会携带参数 可以用于发送数据请求 来获取对应的数据

那么在组件中如何获取url中携带的参数？

在vue生命周期created中来获取数据 在vue的实例对象中存在$router里面的params，query属性就是url中的值

<template>
    <div>
        <p>id:{{$route.params.id}}</p>
        <p>query.a:{{$route.query.a}}</p>
        <p>query.b:{{$route.query.b}}</p>
    </div>
</template>
<script>
export default {
    created(){
        console.log(this)
    }
}
</script>

案例:

获取堆糖网站上的信息渲染到页面

首先在项目中创建vue.config.js （用来做前端的反向代理）

module.exports = {
    devServe: {
        proxy: {
            '/napi': {
                target: 'https://m.duitang.com',
                changeOrigin: true
            }
        }
    }
}

利用axios请求网站上的数据（注意引入axios组件）

现在入口文件设置全局axios

import axios from 'axios'
Vue.prototype.$http = axios

<script>
    export default {
        data(){
            return {
                navs:null
            }
        },
        created(){
            this.$http({
                url:'/napi/category/detail/',
                params:{
                   app_version:14,
                    app_code:'mdt',
                    category_id:'5017d172705cbe10c0000007',
                }
            }).then(res => {
              //将请求得来的数据 赋值给 当前组件的navs
              this.navs = res.data.data.sube_cates

            })
              .catch(error => console.log(error))
        }
    }
</script> 

最后在zxh上接受数据渲染到页面

<template>
  <div>
    <ul>
      <li v-for = " list in lists " :key = "list.id">
        <p> 点赞量：{{ list.favorite_count }} </p>	\\随便取数据渲染到页面
        <p> msg: {{ list.msg }} </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lists: null
    }
  },
  watch: {
    $route () {
      this.ajax()
    }
  },
  methods: {
    ajax () {
      this.$http({
        url: '/napi/blog/list/by_category/',
        params: {
          start: 0,
          include_fields: 'sender,album,like_count,msg',
          limit: 24,
          cate_key: this.$route.params.id,
          path: this.$route.query.path,
          _: Date.now()
        }
      }).then( res => {
        this.lists = res.data.data.object_list
      })
        .catch( error => console.log( error ))
      }
  }
}
</script>

---

2.路由懒加载

由于每次点击都相当于发起一次请求 极大增加了浏览器的性能，所以需要使用懒加载来减少请求的次数

在路由配置文件中设置

const Home = () => import(/* webpackChunkName: "group-foo" */ '../pages/Home.vue')

这种形式的导入模块方式就是路由懒加载

---