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