vue router 簡單入門小例項

2021-08-10 09:30:11 字數 1002 閱讀 9156

用vue.js+vue-router建立單頁應用,是非常簡單的。使用vue.js我們已經可以通過組合元件來組成應用程式,當需要把vue-router新增進來,我們需要做:

將元件(components)對映到路由(router),然後告訴vue-router在**渲染它們。

下面例子**於vue官方文件getting started,只是為了手打一遍。

src="">

script>

src="">

script>

hello caojiali!h1>

router-view>

div>

// 0. 如果使用模組化機制程式設計,匯入vue和vuerouter,要呼叫vue.use(vuerouter)

// 1. 定義(路由)元件

// 可以從其他檔案 import 進來

const foo =

const bar =

// 2. 定義路由

// 每個路由應該對映乙個元件。 其中 "component" 可以是

// 通過vue.extend()建立的元件構造器,

// 或者,只是乙個元件配置物件。

// 晚點再討論巢狀路由

const routes = [

,]// 3.建立 router 例項,然後傳 'routes' 配置

// 還可以傳別的配置引數,不過先簡單一點。

const router = new vuerouter()

// 4. 建立和掛載根例項。

// 記得要通過 router 配置引數注入路由,

// 從而讓整個應用都有路由功能

router

// 現在,應用已經啟動了。

要注意,當 對應的路由匹配成功,將自動設定 class 屬性值 .router-link-active。檢視api文件。

vue router使用入門

安裝 npm install vue router 使用 import vue from vue import vuerouter from vue router vue.use vuerouter export default new router 屬性傳參 路由 引數配置 張三 獲取 張三雜湊傳...

vue router簡單實現

1.構造vuerouter類 constructor options 的形式 this routesmap this createmap this routes 初始化狀態 this history newhistoryroute 初始化路由設定 this init 2.將routes格式轉化為的形...

VueRouter的簡單使用

1.有乙個html檔案裡的dom元素 的id 作為vue例項掛載的入口 2.建立vuerouter檔案 import vue from vue import vuerouter from vue router import vuerouter import helloworld from compo...