vue实用技巧之路由跳转

写过的代码，踩过的坑，终将成为解决技术问题的宝贵经验

如果你因为路由跳转刷新问题而烦恼，或者是和这篇文章https://blog.csdn.net/wang1006008051/article/details/78686451讲的差不多（该文章的解决方案有bug+ _ +），那我的方法便能很好解决你的问题

image.png

需求：实现路由跳转，选中状态

image.png

方案1.0.0

1、使用router-link跳转，会自带class名，改变其样式即可

image.png

2、代码

// html<ul>    <li v-for="(item,index) of navList" @click="selectNav(item.id)">
    <router-link :to="'/'+item.id">{{item.title}}</router-link>
   </li></ul>// css.router-link-exact-active{        color: red

    }// js
    data(){        return {            navList:[
            {title: '首页',id:'index',}, 
            {title: '店铺',id:'shop'}, 
            {title: '创业直播',id:'live'}, 
            {title: '我的',id:'my'}
            ]

        }
    },// router.js{      path: '/index', 
      name: '首页',// 路由项的名字
      component: Home // 组件的名字
    },
      {      path: '/shop', 
      name: '店铺',      component: Home 
    },
      {      path: '/live', 
      name: '创业直播',      component: Home ,

    },
      {      path: '/my', 
      name: '我的',      component: Home 
    },

3、缺点，只适合一级导航或菜单跳转，当有二级跳转，便会有bug

image.png

我们想要的效果是页面是子页面，但选中的状态是父级

image.png

方案1.0.1

1、设置一个状态，判断时候和当前相等，相等则选中

data(){        return {            // 设置状态
            isSelect:"",
            navList:[
            {title: '首页',id:'index',}, 
            {title: '店铺',id:'shop'}, 
            {title: '创业直播',id:'live'}, 
            {title: '我的',id:'my'}
            ]

        }
    },

2、循环navList，执行点击事件，进行路由跳转

// html
<ul>
            <li v-for="(item,index) of navList" @click="selectNav(item.id)">
                <p :class="isSelect == item.title ? 'active' : ''">{{item.title}}</p>
            </li>
            
        </ul>
        <router-link :to="'/live/'+id">我是产业创业直播的子页面</router-link>
            <router-link :to="'/my/'+id">我的子页面</router-link>
// js
selectNav (id) {
          this.$router.push({path: `/${id}`});
            this.isSelect = this.$route.name
  
      }
// router.js
  {
      path: '/index', 
      name: '首页',// 路由项的名字
      component: Home // 组件的名字
    },
      {
      path: '/shop', 
      name: '店铺',
      component: Home 
    },
      {
      path: '/live', 
      name: '创业直播',
      component: Home ,

    },
      {
      path: '/my', 
      name: '我的',
      component: Home 
    },
      {
      path: '/live/:id', 
      name: 'ss',
      component: Home 
    },
     {
      path: '/my/:id', 
      name: '我的1',
      component: Home 
    },

3、利用$routes自带属性进行判断，是否和当前页一样

// 此方法可解决刷新时候选中的状态
    mounted(){        this.isSelect = this.$route.name;        if(this.$route.name === "default"){            this.isSelect = "首页"
        }else if(/^\/live/g.test(this.$route.path)){            console.log(2)                this.isSelect = "创业直播"
        }else if(/^\/my/g.test(this.$route.path)){            this.isSelect = "我的"
        }
   
    },// 此方法是点击选中的是否选中的状态
    created(){    
this.$router.afterEach(to => {      
    if(/^\/live/g.test(to.path)){        this.isSelect = "创业直播"
    }else if(/^\/my/g.test(to.path)){        this.isSelect = "我的"
    }
    });
    }

}

代码或许冗余，如果你们有更好的解决方案，欢迎指点。。。

作者：jia林
链接：https://www.jianshu.com/p/7a9ea8dbbd30