您的位置：首页 > Web前端 > Vue.js

详解vue-router2.0动态路由获取参数

2017-06-14 11:39 1231 查看

一下demo演示2.0中的vue-router是如何获取到不同参数的，并在地址栏中匹配不同的信息

<!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">
<!-- 跳转路径 -->
<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>获取到数据：{{$route.params}}</p>'
};
var Home = {
template: '<h3>主页</h3>'
};
// 配置路由
var jump = [{
path: '/home',
component: Home
}, {
path: '/news',
component: News,
// 配置子路由
children:[{
// 冒号后面的数据可获取是动态的
path:':tv/article/:num',
component:User
}]
}, {
path: '*',
redirect: '/home'
}];
// 创建实例
var router = new VueRouter({
routes: jump
});
// 挂载实例
var app = new Vue({
el: '#box',
router: router
})
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

讲解vue-router之什么是动态路由

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue router 传参数

相关文章推荐

新的分享

章节导航