單檔案元件與vue路由

單檔案元件：以.vue 結尾的檔案。

裡面放的就是vue 的元件。單檔案元件包含三塊內容：<template>, <script>, <style>. 如下。

vue 路由

路由的功能就是根據網址的不同，返回不同的內容給使用者.即根據url 的不同，返回給使用者不一樣的頁面。

上圖，<router-view/> 是有內容的，它顯示的是當前路由地址所對應的內容。

當前路由地址所對應的內容又是什麼呢？

上面顯示的內容了。開啟入口檔案 main.js

引入了router，並在根例項中，使用了router，ES6語法，屬性名與值相同，可以只寫屬性名，第12行。

而router 就是專案中，路由配置部分的內容。

當寫./router 時，vue 會去找該資料夾，並自動引入該資料夾下，index.js 。該檔案內容如下。

可見，這個檔案匯出的內容為路由的配置項。路由裡的配置：當訪問根路徑時，根路徑的路由（將展示的是）對應的是HelloWorld（component中），而HelloWorld 是從第三行引入的。其中“@” 表示src 目錄。

找到components 下的 HelloWorld 如下。它也是一個單檔案元件。

理解了上述內容。我們就可以更改了。刪掉components 資料夾，在src 下建立一個pages 資料夾 裡面再建立一個home 資料夾 再往裡面放一個Home.vue 單檔案元件，裡面放我們想要展示的頁面。刪掉路由配置頁面關於Helloworld 的內容。

如下。