Skip to content

Vue Router – RouterLink & Router-View

<router-link> & <router-view> là 2 thành phần chủ chốt của vue-router.

Router link dùng để render ra link <a> dựa trên những route của ta một cách dynamically.

Còn Router view chính là nơi mà ta render ra component dựa trên sự thay đổi của route

Còn hơn thế nữa cách mà chúng ta xử lý link còn có params, query, hash v.v. được Vue-Router hỗ trợ rất mạnh mẽ sau đây


Table of Contents

    Router Link

    là nơi render ra <a> kèm với link để navigate chúng ta đến với component ta muốn

    <router-link to="/home">Home</router-link>

    2 cách để truyền thông số cho “to” props

    • string (như trên)
    • object
    <router-link :to="{ path: '/home' }">Home</router-link>

    các thuộc tính của <router-link>

    • to : String | Object
    • replace : Boolean (to use router.replace())
    • active-class : String (Default"router-link-active")
    • exact-active-class : String (Default"router-link-exact-active")
    • custom : boolean
    • aria-current-value : String(‘page’ | ‘step’ | ‘location’ | ‘date’ | ‘time’ | ‘true’ | ‘false’)

    To

    { 
      path: '/path', 
      name: 'users', 
      params: { username: 'posva' }, 
      hash: '#bio' 
    }

    Replace

    <router-link to="/abc" replace></router-link>

    Custom

    <router-link to="/home" custom v-slot="{ navigate, href, route }">
      <a :href="href" @click="navigate">{{ route.fullPath }}</a>
    </router-link>

    Renders:  <a href="/home">/home</a>

    v-slot

    chứa ~ thuộc tính của router-link dành cho element muốn custom

    <router-link
      to="/foo"
      custom
      v-slot="{ href, route, navigate, isActive, isExactActive }"
    >
      <li
        :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
      >
        <a :href="href" @click="navigate">{{ route.fullPath }}</a>
      </li>
    </router-link>
    • href
    • route
    • navigate: function to trigger the navigation. It will automatically prevent events when necessary, the same way router-link does, e.g. ctrl or cmd + click will still be ignored by navigate.
    • isActive
    • isExactActive
    TIP
    If you add a target="_blank" to your a element, you must omit the @click="navigate" handler.

    Router View

    <router-view v-slot="{ Component, route }">
      <component :is="Component" />
    </router-view>

    ~ thuộc tính :

    • name : String (phục vụ cho name views)
    • route
    <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
    <router-view class="view main-content"></router-view>
    
    routes: [
        {
          path: '/',
          components: {
            default: Home,
            // short for LeftSidebar: LeftSidebar
            LeftSidebar,
          },
        },
    ]

    Published inVue Router

    Be First to Comment

    Leave a Reply

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