vue实战：路由监听

Posted 2022-12-18 shidingzhang

一、场景：在页面刷新后，仍然定位到之前菜单栏选中的按钮，即之前的菜单栏按钮仍为激活状态，而非重新定位到第一个默认激活状态的菜单栏按钮。

二、1、在element-ui组件库中，有一个名字为NavMenu导航菜单的组件，<el-menu>标签上有一个属性default-active，其值表明当前激活的菜单按钮对应的组件路由，也可以去掉这个属性，但刷新页面后菜单栏激活的按钮变为第一个，加上这个属性后页面刷新后仍然是之前的菜单按钮为高亮状态。

       2、菜单栏的按钮很多，所以default-active的值不是静态的，这里给一个js对象，逻辑里给这个对象动态赋值为当前组件的路由，即每次刷新页面后默认激活的按钮对应的仍是当前路由对应的组件。

       3、default-active=“activeMenu” // 名字可以随便取

       4、data () // 页面的初始化数据
                 return
                    activeMenu: ‘/home/index‘, // 值为首页组件路由，这里是固定的，当路由发生变化时，要改变activeMenu的值为当前路由。
               
            ,

       5、watch: // 路由监听：监听路由的变化，从而做出相应操作
                 $route:
                     immediate: true, // 一旦监听到路由的变化立即执行
                     handler(to,from) // 回调函数，两个参数，to：当前的组件，from：上一个组件
                        this.activeMenu = to.path // 给activeMenu重新赋值为当前组件的路由地址
                     
              
          

三、路由基础回顾：

1、route：它是一条路由，根据不同的地址展示不同的内容 

2、routes：它是一组路由

3、router：是一个机制，它来管理路由