详解vue-router2.0动态路由获取参数
程序员文章站
2022-06-24 17:21:00
一下demo演示2.0中的vue-router是如何获取到不同参数的，并在地址栏中匹配不同的信息
一下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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。