vue-例9-4演示路由切换组件.html

最新推荐文章于 2023-10-17 22:44:17 发布

虾米大王

最新推荐文章于 2023-10-17 22:44:17 发布

阅读量72

点赞数

分类专栏： Vue 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/modern358/article/details/129977378

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示路由切换组件</title>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/type/1">新闻</router-link>
            <router-link to="/type/2">娱乐</router-link>
            <router-link to="/about">关于我们</router-link>
            <button @click="change">切换</button>
        </div>

        <div>
            <router-view></router-view>
        </div>
    </div>

        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>

        <script>
            let routesObj = [
                {
                    path:'/',
                    component:{
                        template:'<div><h2>首页</h2></div>'
                    }
                },
                {
                    path:'/about',
                    component: {
                        template: '<div><h2>关于我们</h2></div>'
                    }
                },
                {
                    path:'/type/:id',
                    name:'type',
                    component:{
                        template:'<div>' +
                            '<h2>编号已接收{{$route.params.id}}</h2>'+
                            '<router-link to="more" append>显示全部</router-link>'+
                            '<router-view></router-view>'+
                            '</div>'
                    },
                    children:[
                        {
                            path:'more',
                            component:{
                                template:'<div>{{$route.params.id}}的详细信息</div>'
                            }
                        }
                    ]
                }
            ];

            let routerKK = new VueRouter({
                routes:routesObj
            });

            let vm = new Vue({
                el:'#app',
                router:routerKK,
                methods:{
                    change:function () {
                        setTimeout(function () {
                            routerKK.push('/about');
                            setTimeout(function () {
                                routerKK.push({name:'type',params:{id:2}});
                            },2000)
                        },2000)
                    }
                }
            });
        </script>

</body>
</html>