Vue多级路由

多级路由

多级路由是指多个 <router-view> 路由层层嵌套；例如页面A中有一个 <router-view> ，而页面A中的 <router-view> 所加载的页面B中又有 <router-view> ，这样就形成的多级路由嵌套的情况；

多级路由，从根URL访问

路由配置中的 path 以 / 开头时，表示该路由始终从根URL访问

// 配置路由
const router = new VueRouter({
  routes:[
    {
      path:'/works',
      component:Works,
      name:'WorksLink',
      // 配置多级路由，在children数组里添加子路由信息
      children:[
        {path:'/work1',component:work1},
        {path:'/work2',component:work2},
        {path:'/work3',component:work3}
      ]
    },
  ],
  mode:'history'
})

访问链接：

localhost:8080/work1
localhost:8080/work2
localhost:8080/work3

多级路由，多级URL访问

路由配置中的 path 不以 / 开头时，表示该路由的URL路径从上级路由的 path 进行拼接

// 配置路由
const router = new VueRouter({
  routes:[
    {
      path:'/works',
      component:Works,
      name:'WorksLink',
      // 配置多级路由，在children数组里添加子路由信息
      children:[
        {path:'work1',component:work1},
        {path:'work2',component:work2},
        {path:'work3',component:work3}
      ]
    },
  ],
  mode:'history'
})

访问链接：（注：publicPath的配置会直接影响访问链接）

localhost:8080/works/work1
localhost:8080/works/work2
localhost:8080/works/work3

PublicPath

publicPath是部署应用包时的基本 URL，用法和 webpack 本身的 output.publicPath 一致，但 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，就需要用这个选项指定子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

详见：https://juejin.cn/post/6844904126699044872