使用npm命令
npm install vue-router
如果在乙個模組化工程中使用它,必須要通過 vue.use() 明確地安裝路由功能:
import vue from
'vue'
import vuerouter from
'vue-router'
vue.
use(vuerouter)
如果使用全域性的 script 標籤,則無須如此 (手動安裝)。
安裝匯入路由模組。
建立乙個路由物件(new vuerouter({})),當匯入vue-router包之後,在window全域性物件中,就有了乙個路由的建構函式,叫做vuerouter。
給配置物件設定route屬性,route屬性表示路由匹配規則,後面加s表示多個路由匹配規則。
將路由規則物件註冊到vm例項上,用來監聽url位址的變化,然後展示對應元件。
注:
>
"/login"
>
登入router-link
>
"/register"
>
註冊router-link
>
>
router-view
>
div>
>
//元件模板物件
var login =
var register =
var routerobj =
newvuerouter(,
,]})
var vm =
newvue(,
methods:
, router: routerobj
})script
>
vue路由介紹
2.前端路由的使用 前端路由 由前端實現以上功能,前端只存在d單頁面首頁index.htm 規定url格式,獲取url內容 使用場景 共用頁面,如商品詳情,只是商品的id不同 模式匹配路徑 route.params user username user enent user username pos...
Vue簡單介紹
vue vue.js的簡稱 是前端的主流框架之一,和angular.js react.js一起,成為前端三大主流框架,vue.js是一套構建使用者介面的框架,只關注檢視層,它不僅容易上手,還便於與第三方庫或既有專案整合 vue有配置的第三方類庫,可以整合起來做大型專案的開發 先來說明幾個概念 框架和...
簡單的Vue路由
路由可以理解為路徑的來由,通過routes來構建路由物件註冊進router中形成路由例項,再將路由例項註冊到vue中。路由物件中必不可少的有path 路由的虛擬位址,component 路由對應的元件。vue提供的導航元件 router link 最終會渲染成a標籤 to就是href目標位址,通過r...