Vue Router 4

61 阅读1分钟

1 懒加载

使用import

import .vue文件

{
    path:"/home"
    name:"home"
    componet: () => import("xxx/xxx/xx.vue") 
}

2 linkActiveClass 属性 router-link-active

可以用来标识当前路由,进行一些高亮style配置等

  • step1:在router/index.js文件中配置
    image.png
  • step2:在vue文件中设置style
    image.png

3 Dynamic Router 动态路由

路由参数:vue页面不变,参数变化,形如多态

image.png

image.png

image.png

4 Named Router 命名路由

多态时,为了减少路径名维护(使所有path用同一个名字),可以增加个name参数

  • step1:修改router/index.js文件

image.png

  • step2:修改vue文件