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’)


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


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


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

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


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

      v-slot="{ href, route, navigate, isActive, isExactActive }"
        :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
        <a :href="href" @click="navigate">{{ route.fullPath }}</a>
    • 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
    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" />

    ~ 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

    Published inVue Router

    Be First to Comment

    Leave a Reply

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