vue router 建立 vue 單頁應用示例

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
=title 
%>
title
>
6<
link 
rel="stylesheet"
href
="/css/style.css"
>
7<
script 
src="/js/vue.min.js"
>
script
>
8<
script 
src="/js/vue-router.min.js"
>
script
>
9head
>
10<
body
>
11<
h1>vue router
h1>
12<
div 
id="box"
>
13<
router-link 
to="/home"
>home
router-link
>
14<
router-link 
to="/news"
>news
router-link
>
15<
div>
16<
router-view
>
router-view
>
17div
>
18div
>
19body
>
20html
>

1

點選 news 標籤

通過開發者工具可以看到，router-link 標籤被解析成了a標籤， router-view 標籤被 元件的模板內容替換。

當對應的路由匹配成功，將自動設定 class 屬性值.router-link-active

。參考：

vue router建立單頁面

如果新建專案時，沒有安裝vue router依賴的話，需要手動安裝該依賴。在終端中輸入 npm install vue router 在src目錄下，新建乙個router資料夾 與components資料夾同級 在該目錄下新建乙個index.js檔案 import vue from vue impo...

Vue 前端路由 vue router

1 前端路由 後端路由 多頁面，伺服器端渲染好返回給瀏覽器。前後端分離 後端只提供api來返回資料，前端通過ajax獲取資料後，在通過一定的方式渲染到頁面上。spa 前後端分離 前端路由。spa只有乙個html檔案，整個 的所有內容都在這乙個html裡，通過js來處理。2 vue router 路由...

vue路由外掛程式vue router

對於大多數單頁面應用，都推薦使用官方支援的 vue router 庫。更多細節可以移步 vue router 文件。vue router 是 vue.js 官方的路由管理器。它和 vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有 官方 vue router 官方的比較慢，可以...