vue 路由的作用，視圖渲染

視圖渲染

路由出了頁面跳轉這個功能以外，還有一個功能，那就是視圖渲染。
簡單點說，就是在頁面加載的時候，通過配置好的路由路徑，將對應好的模塊渲染到頁面。
我們通過router-view標簽，來指定渲染的位置。

舉例說明。
在router目錄下的index.js文件配置路由。

// 導入模塊
import apple from '@/components/apple'

// 配置路由
export default new Router({
  routes: [{
    path: '/',
    name: 'apple',
    component: apple
  }]
})

在App.vue文件中，加入以下內容。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

瀏覽器輸入地址http://localhost:3000/#/，此時，apple模塊的內容就會被渲染在頁面上。

當然，也不是說只能在加載頁面的時候渲染，加載頁面的時候只是一個觸發條件，我也可以換一個觸發條件來渲染頁面，僅僅只是給它一個觸發的條件。
最常見的就是點擊某個按鈕、或a標簽來觸發路由渲染。

我們舉例說明。
在router目錄下的index.js文件配置路由。

// 導入模塊
import apple from '@/components/apple'
import banana from '@/components/banana'

// 配置路由
export default new Router({
  routes: [{
    path: '/apple',
    name: 'apple',
    component: apple
  }, {
    path: '/banana',
    name: 'banana',
    component: banana
  }]
})

在App.vue文件中，加入以下內容

<template>
  <div id="app">
    <div>
      <router-link :to="{path:'/apple'}">蘋果</router-link>
      <router-link :to="{path:'/banana'}">香蕉</router-link>
    </div>
    <router-view/>
  </div>
</template>

路由渲染和組件渲染的區別：

由上面例子，我們可以得出結論，路由渲染需要觸發條件，而普通的組件渲染則不需要觸發條件，你只要通過標簽指定渲染的位置，那么該組件一定會被渲染出來。