Skip to content

Vue Router – History mode, Catch all/404, Matching Syntax

History mode là phương thức lưu lịch sử trang web vì VueJs là SPA (single page application) nghĩa là ta không có xử lý html code từ server trả về mà trực tiếp thay đổi trên client luôn

Chính vì thế page của chúng ta sẽ không reload full-page nên là đường dẫn sẽ không thay đổi

Nhưng vue-router cho phép ta làm điều đó với createWebHistory()


Table of Contents

    History Mode

    • "history"createWebHistory()
    • "hash"createWebHashHistory()
    • "abstract"createMemoryHistory()
    const router = createRouter({
      history: createWebHashHistory()
    })

    optional base to provide. Useful when the application is hosted inside of a folder like https://example.com/folder/

    createWebHistory() // No base `https://example.com`
    createWebHistory('/folder/') // `https://example.com/folder/`
    createWebHashHistory() // `https://example.com/folder#`
    createWebHashHistory('/folder/') // `https://example.com/folder/#`

    Catch All / 404

    const routes = [
      // will match everything and put it under `$route.params.pathMatch`
      { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
    
      // will match anything starting with `/user-` and put it under `$route.params.afterUser`
      { path: '/user-:afterUser(.*)', component: UserGeneric },
    ]

    Sử dụng

    this.$router.push({
      name: 'NotFound',
      params: { pathMatch: this.$route.path.split('/') },
    })

    // Good
    { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
    
    // if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing  
    
    // Bad
    { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound }

    Name Routes

    // Bad
    router.resolve({
      name: 'bad-not-found',
      params: { pathMatch: 'not/found' },
    }).href // '/not%2Ffound'
    
    // Good
    router.resolve({
      name: 'not-found',
      params: { pathMatch: ['not', 'found'] },
    }).href // '/not/found'

    Advance Matching Syntax

    const routes = [
      // matches /o/3549
      { path: '/o/:orderId' },
    
      // matches /p/books
      { path: '/p/:productName' },
    
      // /:orderId -> matches only numbers
      { path: '/:orderId(\\d+)' },
    
      // only match numbers
      { path: '/:chapters(\\d+)+' },
      { path: '/:chapters(\\d+)*' },
    
      // /:productName -> matches anything else
      { path: '/:productName' },
    
      // /:chapters -> matches /one, /one/two, /one/two/three, etc
      { path: '/:chapters+' },
    
      // /:chapters -> matches /, /one, /one/two, /one/two/three, etc
      { path: '/:chapters*' }
    
      // option '?'
      // will match /users and /users/posva
      { path: '/users/:userId?' },
    
      // will match /users and /users/42
      { path: '/users/:userId(\\d+)?' },
    ]

    Make sure to escape backslashes \ like we did with \d to actually pass the backslash character to a string in JavaScript.

    Resolving

    Sự khác biệt giữa * & +

    // given { path: '/:chapters*', name: 'chapters' },
    
    router.resolve({ name: 'chapters', params: { chapters: [] } }).href
    // produces /
    
    router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
    // produces /a/b
    
    //=============
    // given { path: '/:chapters+', name: 'chapters' },
    
    router.resolve({ name: 'chapters', params: { chapters: [] } }).href
    // throws an Error because `chapters` is empty
    Published inVue Router

    Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *