詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù)
更新時(shí)間：2017年06月14日 11:39:46 作者：22337383
本篇文章主要介紹了詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一下demo演示2.0中的vue-router是如何獲取到不同參數(shù)的，并在地址欄中匹配不同的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.min.js"></script>
</head>
<body>
<div id="box">
<!-- 跳轉(zhuǎn)路徑 -->
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<div>
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
var News = {
template:`
<div>
<h3>新聞</h3>
<router-link to="/news/yule/article/001">娛樂(lè)頻道</router-link>
<router-link to="/news/zhibo/article/002">直播頻道</router-link>
<div><router-view></router-view></div>
</div>
`
};
var User = {
template: '<p>獲取到數(shù)據(jù)：{{$route.params}}</p>'
};
var Home = {
template: '<h3>主頁(yè)</h3>'
};
// 配置路由
var jump = [{
path: '/home',
component: Home
}, {
path: '/news',
component: News,
// 配置子路由
children:[{
// 冒號(hào)后面的數(shù)據(jù)可獲取是動(dòng)態(tài)的
path:':tv/article/:num',
component:User
}]
}, {
path: '*',
redirect: '/home'
}];
// 創(chuàng)建實(shí)例
var router = new VueRouter({
routes: jump
});
// 掛載實(shí)例
var app = new Vue({
el: '#box',
router: router
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇內(nèi)容給大家詳細(xì)分析了關(guān)于vue數(shù)據(jù)控制視圖的源碼以及重點(diǎn)做了注釋，有興趣的朋友參考學(xué)習(xí)下。2018-03-03
這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue多層嵌套路由,結(jié)合實(shí)例形式分析了vue.js多層嵌套路由的概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
本文通過(guò)實(shí)例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下2018-09-09
解決Mint-ui 框架Popup和Datetime Picker組件滾動(dòng)穿透的問(wèn)題
這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動(dòng)穿透的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue3將通用組件注冊(cè)成全局組件的方法，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue經(jīng)歷從2.0到3.0更新之后,簡(jiǎn)??之就是變得更輕更快,使?起來(lái)更加?便,下面這篇文章主要給大家介紹了關(guān)于vue3.0和vue2.0區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-10-10
在idea上Vue的安裝和創(chuàng)建過(guò)程
本文詳細(xì)介紹了如何在計(jì)算機(jī)上安裝和配置Node.js,包括下載Node.js,驗(yàn)證安裝成功,配置npm的全局模塊目錄和緩存目錄,設(shè)置環(huán)境變量,配置npm鏡像,安裝Vue.js等步驟,通過(guò)這些指導(dǎo),你可以在IDEA上成功創(chuàng)建和運(yùn)行Vue項(xiàng)目2024-10-10
這篇文章主要介紹了解決vue-pdf查看pdf文件及打印亂碼的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實(shí)例
這篇文章主要介紹了Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09