VUE:声明式导航
一、链接跳转方式-------声明式导航的引入
链接跳转可以用location.href跳----编程式跳转 js的跳转方式
链接跳转可以用超链接跳 声明式跳转 端口号 域名都可以省略。3-13行**
二、声明式导航
在 Vue.js 应用中，可以通过监听路径的改变来实现组件的动态高亮显示。每当路径发生变化时，使用 window.onhashchange 事件监听器或通过 location.hash 获取哈希值，并进行相应的操作。ECMAScript 提供了 onhashchange 事件，该事件属于浏览器对象模型（BOM），每次路径改变时都会触发window.onhashchange 事件，从而可以用于执行相应的高亮逻辑。
此外，Vue Router 提供了声明式导航功能，如 router-link 组件，能够实现更加直观和简洁的路径导航。借助 router-link，开发者可以定义一个可点击的链接，实现路径切换并触发相应的组件更新。通过监测 router-link 的 to 属性所指向的路径变化，可以动态控制与当前路径匹配的组件的高亮效果。
下图567 8910行展示了router-link 组件的使用
观察右侧：每次切换到的组件上会自动加这个class: router-link-exact-active router-link-active
我们可以给这个class .router-link-active 加css设置，如图颜色设置。27 28行
当然我们可以改变class的名字：（因为一个页面中用到多次router-link-active，所以我们可以自定义class名为其他的）active-class=" kerwinactive" 动态切换class
观察到右侧每次切换到的组件上会自动加这个kerwinactive
记得修改自定义的kerwinactive的css设置。
注意：APP.vue里的 to里面的内容不是瞎写的，要和index.js的内容是一致的。6 9 行 对应下图index.js路由文件里的11 15行。
tag=“li” tag属性可以模拟我是谁？此时代码没有包裹在li标签里面，但是由于tag=“li”的原因，渲染出来仍然是li样式
但是不支持在Vue Router 4 新版本中不支持tag。
在Vue Router 4的时候，只能使用custom自定义的插槽模式了。只有to属性没改变，但是之前的active-class=““不能用，tag=“”也不能用了。只能用以下方式：
插槽的方式更灵活，可扩展性更好，但是用起来可能不太习惯。
插槽示例代码：12 13 14 custom v-slot=”{}” v-slot传进去一个对象。
再加上isActive表示当前是否被选中
在此基础上就可以细粒度的控制了，高亮没加在li身上，加在li里面身上了。
router-link是个组件，然后to也可以动态绑定的，然后to指向变量，这样就可以用for循环遍历出来了。
三、官方文档
vue的官方文档：
路由的官方文档：
四、引入
【1】https://www.bilibili.com/video/BV17z4y1D7Yj/?p=504&spm_id_from=333.880.my_history.page.click
标签：VUE,DAY20240908,li,Vue,link,跳转,组件,router,class From： https://blog.csdn.net/weixin_52881828/article/details/141939300