美文网首页
路由传参

路由传参

作者: css7 | 来源:发表于2017-12-18 09:10 被阅读0次
        <div id="app">
            <span>
                <router-link to="/home">home</router-link>
            </span>
            <span>
                <router-link to="/news">news</router-link>
            </span>
            <router-view></router-view>
        </div>
    
        <template id="home">
            <div>home</div>
        </template>
    
        <template id="news">
            <div>
                <!-- news进入详情页面,并且传入当前被点击新闻的id -->
                <ul>
                    <li>
                        <router-link to="/news/0">新闻1</router-link>
                    </li>
                    <li>
                        <router-link to="/news/1">新闻2</router-link>
                    </li>
                    <li>
                        <router-link to="/news/2">新闻3</router-link>
                    </li>
                    <li>
                        <router-link to="/news/3">新闻4</router-link>
                    </li>
                </ul>
            </div>
        </template>
    
    
        <template id="detail">
            <div>
                <h1>新闻详情</h1>
                <div>接收过来的新闻:{{newsArr[$route.params.id].con}}</div>
                <!-- $route接收参数,在template中接收 -->
            </div>
        </template>
    
    
        <script>
            var Home = Vue.extend({
                template: '#home'
            });
            var News = Vue.extend({
                template: '#news'
            })
    
    
            var Detail = Vue.extend({
                'template': '#detail',
                data: function () {
                    return {
                        newsArr: [{
                                id: 001,
                                con: '新闻1'
                            },
                            {
                                id: 002,
                                con: '新闻2'
                            },
                            {
                                id: 003,
                                con: '新闻3'
                            },
                            {
                                id: 004,
                                con: '新闻4'
                            }
                        ]
                    }
                }
            });
    
            var arr = [{
                    path: '/home',
                    component: Home
                },
                {
                    path: '/news',
                    component: News
                },
                {
                    path: '/news/:id',
                    component: Detail
                }
            ];
    
            var router = new VueRouter({
                routes: arr
            });
    
            var vm = new Vue({
                'el': '#app',
                router,
                beforeCreate:function(){
                    this.$router.push('/');
                }
            });
        </script>
    

    相关文章

      网友评论

          本文标题:路由传参

          本文链接:https://www.haomeiwen.com/subject/blepwxtx.html