vue-router—8动态路径参数

末蓝、 2022-01-15 11:27 110阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

router

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

App.vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

user.vue

<template>
      <div>
        我是user
        <div class="user-list">
          <router-link style="padding: 0px 20px" :to="{path: '/user/'+item.tip+'/'+item.id, query: {info: 'follow'}}" key="index" v-for="item,index in userList">{
       {item.userName}}</router-link>
        </div>
        <div class="user-info" v-if="userInfo.userName" style="font-size: 20px">
          <p>姓名： {
       {userInfo.userName}}</p>
          <p>性别： {
       {userInfo.sex}}</p>
          <p>爱好： {
       {userInfo.hobby}}</p>
        </div>
        <hr>
        <div v-if="userInfo.userName" class="info-list" style="font-size: 20px;">
          
          <router-link exact :to="{path:'',query: {info:'follow'}}">他的关注</router-link>
          <router-link exact :to="{path:'',query: {info:'share'}}">他的分享</router-link>
          
          
          <div>
            {
       {$route.query}}
          </div>
        </div>
      </div>
    </template>
    
    <script>
      let data = [
        {
          id:1,
          tip:'vip',
          userName:"leo1",
          sex:'男',
          hobby:'写代码'
        },
        {
          id:2,
          tip:'vip',
          userName:"leo2",
          sex:'男',
          hobby:'唱歌'
        },
        {
          id:3,
          tip:'common',
          userName:"leo3",
          sex:'男',
          hobby:'读书'
        }
      ]
        export default {
          data(){
              return {
                  userList: data,
                  userInfo: {}
              }
          },
          watch:{
            $route(){
                // 路径发生变化，$route会重新赋值，监控了这个属性，会执行这个函数
              this.getData()
            }
          },
          created(){
            debugger;
            // 渲染这个组件会调用一次这个生命周期函数
            // 复用这个组件，这个函数不会再次被调用了
            // 地址一旦发生变化，$route会重新生成一个路由信息对象
             this.getData()
          },
          methods:{
              getData(){
                debugger;
                let id = this.$route.params.userId;
                if( id ){
                  this.userInfo = this.userList.filter((item)=>{
                    return item.id == id
                  })[0]
                }else{
                  this.userInfo = {};
                }
              }
          }
        }
    </script>
    <style>
    
    </style>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220115/7733579177ca459395beadbe3a00c897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220115/092bf5a5fb0249c09db2906c59c99855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220115/b77fb40747f741a0b85b8edef2dbfcd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220115/dd54801fef24431b8be966db0c74316a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220115/b26ad9a8c896476fb1569eaf5190f877.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20220115/83e88cf6190443dd891e834848b1a3e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6]: /images/20220115/c0bcb58672664374ad529f077a409579.png