doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>vue 測試例項 - 菜鳥教程(runoob.com)
title
>
<
script
src=""
>
script
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
<
h1h1
>
<
p>
<
router-link
to="/foo"
>go to foo
router-link
>
<
router-link
to="/bar"
>go to bar
router-link
>
p>
<
keep-alive
>
<
router-view
>
router-view
>
keep-alive
>
div>
<
script
>
//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 配置引數注入路由,
//從而讓整個應用都有路由功能
=new
vue().$mount(''
)//現在,應用已經啟動了!
script
>
body
>
html
>
vue元件重新載入(重新整理)
if isrouteralive 然後其它任何想重新整理自己的路由頁面,都可以這樣 this reload 這種方法可以實現任意元件的重新整理。第二種方法 路由替換 replace another route with different component or a dead route at f...
vue 路由懶載入,元件非同步載入
用於緩解首屏載入緩慢 1.vue非同步元件 vue router配置路由 使用vue的非同步元件實現按需載入 2.webpack 的 require.ensure vue router配置路由,使用webpack的require.ensure,也可實現 require.ensure 接受三個引數 語...
vue路由懶載入匯入元件
新建 import development.js 生產環境匯入元件 module.exports file require views file vue default新建 import production.js 生產環境匯入元件 module.exports file require views...