關於vue-router嵌套路由

在vue-router文檔,嵌套路由一節,給了一個例子:vue

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功,
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

後面有一句加粗的話:vue-router

要注意,以 / 開頭的嵌套路徑會被看成根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。

這句話不是很理解。json

今天配置路由的時候,碰到一個詭異的狀況:瀏覽器

const router = new VueRouter({
  routes: [
    { 
        path: '/user', 
        component: User,
    },
    { 
        name: 'user2', 
        path: 'user2',  // 此處沒加斜槓
        component: User2,
    },
  ]
})

而後在使用的時候,使用name:post

<router-link :to="{ name: 'user2', params: {} }" exact>連接</router-link>

這時,在瀏覽器地址欄,會顯示成:spa

http://localhost:8080/user/user2

這兩個路由,在配置時候是同級的,顯示的時候,渲染的router-view也是同級的。可是在地址欄的語義上,是有從屬關係的。這裏咱們是否是能夠得出一個結論:沒有以/開頭的路徑,會被處理成嵌套路徑,跟在前一個路徑的後面。code

更正:
沒有以/開頭的路徑,會被處理成嵌套路徑,跟在當前頁面的頂級路徑後面,並且不能刷新,一刷新就會找不到頁面。
這裏的當前頁面頂級路徑是 component

http://localhost:8080/user/user2router

PS:
發現了一個淘寶的拼音bug
前兩天研究淘寶購物車的優惠券展現,發現返回的json數據裏,優惠券拼音是錯誤的,?blog

clipboard.png

相關文章
相關標籤/搜索