Vue基礎實戰 路由綜合測試快速Demo

參考**:

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>vue路由綜合測試快速demo
title
>
head
>
<
body
>
<
div 
id>
<
h2>}
h2>
<
router-link 
to="/"
>首頁
router-link
>
<
h2>測試1
h2>
<
router-link 
to="/news"
>新聞
router-link
>
<
router-link 
to="/news/2222"
>帶引數新聞2
router-link
>
<
router-link 
to="/news?userid=3333"
>帶引數新聞3
router-link
>
<
router-link 
to="/news?userid=4444"
>帶引數新聞4
router-link
>
<
hr>
<
h2>測試2
h2>
<
router-link 
to="news"
>[當前路徑上/新聞1]
router-link
>
<
router-link 
:to="}"
>[帶引數新聞2]
router-link
>
<
router-link 
:to="}"
>[空引數新聞4]
router-link
>
<
router-view
>
router-view
>
div>
<
script 
src="../js/vue.js"
>
script
>
<
script 
src="../js/vue-router.js"
>
script
>
<
script
>
const indextmp 
=vue.extend(});
},routerto2()});
},routerto3()});
},routerto4());
} 
}});
const newstmp 
=vue.extend(}--query.userid is:}
'});
const newstmp2 
=vue.extend(}--query.userid is:}
'});
const newst*** 
=vue.extend(}--query.userid is:}
'});
const newstmp4 
=vue.extend(}--query.userid is:}
'});
const index 
=vue.component(
'index
',indextmp);
const news 
=vue.component(
'news
',newstmp);
const news2 
=vue.component(
'news2
',newstmp2);
const news3 
=vue.component(
'news3
',newst***);
const news4 
=vue.component(
'news4
',newstmp4);
const router 
=new
vuerouter(,,,
,,
]});
=new
vue(
},router: router
});script
>
body
>
html
>

vue路由基礎

router link類似於a標籤，用於在單頁面之間的跳轉，預設渲染為a標籤 to屬性,後面跟著用於跳轉的路徑 tag屬性，指定渲染成指定的標籤 tab p router link active,自動啟用的class名稱，當 to 屬性的值和位址列路徑相同自動啟用該屬性。4.linkactivecl...

vue路由基礎詳解

vue.js script vue router.js script import vue from vue import vuerouter from vue router vue.use vuerouter src vue.js script src vue router.js script i...

vue學習筆記 路由基礎

一 前面我們提到過單頁面富應用階段，那就要依靠我們的前端路由 vue router 二 配置安裝路由 2 在router資料夾下的index.js中學相關的路由配置 首先匯入路由 import vuerouter from vue router import vue from vue 3.這裡我們同...