vue學習 vue router的基本使用步驟

注：由於vue-router是基於vue實現的，所以先引入vue檔案，再引入vue-router檔案。

>
"/login"
>登陸
"/register"
>註冊

router-link標籤：在瀏覽器中會被預設渲染成a標籤，to屬性則會被渲染成href屬性，to的屬性值則會被渲染成：#原本的值（例如to="/login"則會被瀏覽器渲染成：href="#/login"）。

var login =
var register =

注：由於我們在頁面中不需要載入元件，所以我們不用去註冊元件。建立出模板就可以了。

var router =
newvuerouter(,
,]})

注：routes是乙個陣列，用來儲存配置路由的資訊，每乙個路由的配置資訊放在乙個物件中。path是路由位址（對應著html中的router-link標籤的to屬性的值），component是當你的瀏覽器的路由位址和path屬性符合時，就會渲染對應的元件，對應的元件則會在html中的router-view標籤中顯示

var vm =
newvue
()

注：在vue中，有乙個router屬性，是用來掛載路由物件的（相當於註冊路由吧，跟註冊元件差不多），例項路由物件就是第三部的router變數頁面：

位址列：

頁面：

位址列：

<
!doctype html>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
vue-router demo
>
"/login"
>登陸
"/register"
>註冊
var login =
var register =
var router = new vuerouter(
,            ,
]})    var vm = new vue(
)

vue學習 vue router的基本使用步驟

Vue學習一（Vue Router 路由）

Vue學習12箭頭函式 vue router

vue的VueRouter導航守衛

vue學習 vue router的基本使用步驟

Vue學習一（Vue Router 路由）

Vue學習12箭頭函式 vue router

vue的VueRouter導航守衛

相關推薦