vue路由小demo練習

路由知識詳解位址

接著前面的demo位址繼續練習路由知識.

主要完成首頁和電影無重新整理跳轉切換以及動態路由.實際就是元件之間的切換

先上效果圖

首頁:(簡單表示一下)

電影頁:

假設有乙個電影詳情頁，詳情頁需要根據電影的id來獲取電影物件，然後渲染元件

那麼電影詳情頁的位址中就需要包含電影的id

這裡就涉及到三個問題：

如何把動態位址（位址某一部分會變化）匹配到元件

如何在元件中獲取到動態部分的內容

路由跳轉時，如何優雅的告知動態內容

解決方案見位址

專案目錄:

在前面基礎上增加了以下幾個元件:

home.js 主頁元件

movie.js 電影頁元件

router.js 路由規則配置元件

moviedetail.js 電影詳情頁元件

index.js

// 入口模組

// 負責新建立乙個vue例項
;import router from
"./router.js"
newvue(,
router,
//將路由的功能嵌入到了vue例項中
el:, template:})
;

// 新建乙個元件

//路由規則配置:當你遇到什麼樣的路徑的時候,你要去渲染什麼樣的元件
var template =
` 首頁
電影頁`;
// 匯出乙個元件配置物件
export
default},
};

export

default

import moviedetail from

"../components/moviedetail.js"
import movieservice from
"../service/movieservice.js"
;var template =
` 回到列表頁
`;export
default
,data()
},async
created()
,}

import home from

"./pages/home.js"
import movielist from
"./pages/movielist.js"
import movie from
"./pages/movie.js"
export
default
newvuerouter(,
,]})

var template =`  

英文名：}
票房：}
導演詳情介紹:}`;
export
default

// 一條電影

var template =
`英文名：}
型別：}
上映地區：}
時長：}}`;
export
default
;

vue資料管理vuex小demo練習

接著前面的demo繼續練習,前面的練習位址 主要練習資料管理vuex,解決資料共享問題.主要涉及的知識點位址 效果 index.js import movies from movies.js import online from online.js export default newvuex.st...

Linux操作小練習 demo

3.完成 1.使用root使用者建立 tmp test目錄 su root mkdir tmp test 2.使用tom使用者進入 tmp test目錄，並在其下建立資料夾 su tom cd tmp test mkdir 如果建立不了，則把 tmp test的所屬使用者及使用者組改為tom 3.t...

python選課系統demo的小練習

簡化選課系統 先登陸,然後判斷身份並例項化,根據身份對應的類,讓使用者選擇 class manager operate dict 創造學生賬號 creat student 檢視學生資訊 check student def init self,name self.name name defcreat ...