零基础学习Vue: 第37课 Vue动态组件切换获取数据渲染页面方法：
程序员文章站
2022-03-07 17:19:36
...
零基础学习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>