零基础学习Vue: 第37课 Vue动态组件切换获取数据渲染页面方法：

最新推荐文章于 2025-07-09 00:00:12 发布

舜岳

最新推荐文章于 2025-07-09 00:00:12 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_41614928/article/details/89598020

vue 专栏收录该内容

80 篇文章

订阅专栏

本文介绍Vue中动态组件切换时，如何根据不同数据渲染页面的方法。包括使用watch监听路由参数变化及给router-view添加key值，确保组件唯一性并重新渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

零基础学习Vue: 第37课 Vue动态组件切换获取数据渲染页面方法：

解决方法一：

设置watch监听事件，监听params传递数据的变化从而触发监听函数获取数据

watch:{
    $route(){
    //假装在里面请求页面数据
         alert('成功打开'+this.$route.params.page+'页面，成功请求到页面'+this.$route.params.page+'的数据');
     }
}

解决方法二：

给router-view标签添加key值表示唯一性这样每次切换aaa页面组件就会重新渲染从而触发created生命周期函数获取数据

<router-view :key="Math.random()"></router-view>

下面是详细实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 实验目的：当切换的组件相同而params传输的数据不同时 如何通过不同的数据显示对应的页面 -->
    <!-- router-link页面切换路由 可见切换组件都相同 只是传递数据不同 -->
   <router-link :to="{name:'aaalink',params:{page:1}}">文章1</router-link>
    <router-link :to="{name:'aaalink',params:{page:2}}">文章2</router-link>
    <router-link :to="{name:'aaalink',params:{page:3}}">文章3</router-link>

    <!-- router-view跳转显示的页面组件 -->
    <router-view></router-view>

    <!-- 解决方法二 给router-view标签添加key值 表示唯一性 这样aaa页面组件就会重新渲染从而触发created生命周期函数获取数据-->
    <!-- <router-view :key="Math.random()"></router-view> -->
</div>


<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入vue-router路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>

    //2.创建子组件aaa (动态组件)由传输数据不同而显示不同的数据 但是页面的框架结构是相同的
    let aaa = {
        template:'<div>我是第{{$route.params.page}}篇文章</div>',
        // 生命周期函数 当页面切换时触发 可在此函数内请求数据
        created(){  // 因为切换的页面组件都是aaa页面组件 所以created生命周期函数只在第一次渲染aaa组件时执行
            alert('现在渲染页面'+this.$route.params.page+'，现在我可以通过传输过来的参数创建url请求数据');
        },
        //以下是解决方法一
        //用于传递的this.$route.params.page值是变化的，所以我们可以监听它的变化触发函数事件来请求数据
        watch:{
            $route(){
                alert('成功打开'+this.$route.params.page+'页面，成功请求到页面'+this.$route.params.page+'的数据');
            }
        }
    }

    // 3.创建路由和组件的映射表
    let routes = [  //路由和组件的映射表    component:aaa注册子组件
        {path:'/aaa/:page',name:'aaalink',component:aaa},
    ];

    //4.实例化路由对象
    let router = new VueRouter({
        routes
    })

    // 1.创建根组件
    let vm = new Vue({
        el:'#app',
        router  //5.注册路由
    })
</script>
</body>
</html>