这里有新鲜出炉的vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
本篇文章主要介绍了详解vue-router2.0动态路由获取参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
一下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>
来源: http://www.phperz.com/article/17/0824/338670.html