美文网首页
路由传参

路由传参

作者: 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>

相关文章

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • Vue 动态路由

    动态路由 动态路由传参

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • 路由传参

    路由传参

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

  • vue-router传参

    1.params params传参 2.router-link query传参 3.路由传参

网友评论

      本文标题:路由传参

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