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

2021-10-03 14:46:45 字數 1516 閱讀 4748

注:由於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 路由)

一 配置路由 1.建立元件 元件均被建立完成 import home from components home.vue import news from components news.vue import content from components content.vue import use...

Vue學習12箭頭函式 vue router

es6中的肩頭函式 const cc 引數列表 例如 乙個引數的時候括號可以省略掉 const power num 函式中沒有引數的時候 const test 函式中還有一行 的時候 const mul num1,num2 num1 num2什麼時候用箭頭函式比較多?打算把乙個函式作為另外乙個函式引...

vue的VueRouter導航守衛

路由首位是什麼?當做vue cli專案的時候感覺在路由跳轉前做一些驗證,比如登入驗證,是 中的普遍需求。主要用來通過跳轉或取消的方式守衛導航。在渲染該元件的對應路由被 confirm 前呼叫 不!能!獲取元件例項 this 因為當守衛執行前,元件例項還沒被建立 雖然無法直接獲取元件實力 但是我們可以...