詳解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)建實(shí)例
var router = new VueRouter({
routes: jump
});
// 掛載實(shí)例
var app = new Vue({
el: '#box',
router: router
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了vue中的無限循環(huán)，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
Vue利用AJAX請求獲取XML文件數(shù)據(jù)的操作方法
在現(xiàn)代Web開發(fā)中,從前端框架到后端API的交互是必不可少的一部分,Vue.js作為一個輕量級且功能強(qiáng)大的前端框架,支持多種方式與服務(wù)器通信,從而獲取或發(fā)送數(shù)據(jù),本文將詳細(xì)介紹如何在Vue.js項目中使用AJAX請求來獲取XML格式的數(shù)據(jù),需要的朋友可以參考下2024-09-09
自定義指令，其實(shí)就是在vue提供的鉤子中寫代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實(shí)現(xiàn)與使用，需要的可以參考一下2023-05-05
vue中使用swiper,左右箭頭點(diǎn)擊沒有效果問題及解決
這篇文章主要介紹了vue中使用swiper,左右箭頭點(diǎn)擊沒有效果問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
使用vue + less 實(shí)現(xiàn)簡單換膚功能的示例
下面小編就為大家分享一篇使用vue + less 實(shí)現(xiàn)簡單換膚功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要來和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠?yàn)榇蠹以?nbsp;Vue 3 項目中更好地利用 Hooks 提供一些思路和實(shí)踐經(jīng)驗(yàn)2023-12-12
這篇文章主要介紹了Vue封裝全局過濾器Filters的步驟，通過封裝vue全局過濾器實(shí)現(xiàn)filters的統(tǒng)一管理。感興趣的朋友可以了解下2020-09-09
vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式
這篇文章主要介紹了vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要給大家介紹了關(guān)于vue三種模糊查詢方式的相關(guān)資料,在vue中模糊搜索主要是用computed屬性實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了如何理解Vue的v-model指令的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07