Vue.js 两个新的生命周期钩子（路由组件独有）

2023-04-17 13:43| 来源: 网络整理| 查看: 265

视频

11.两个新的生命周期钩子作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。具体名字： activated路由组件被激活时触发。 deactivated路由组件失活时触发。

> Home.vue News.vue

components Banner.vue Vue Router Demo 后退前进测试一下go pages About.vue 我是About的内容 Detail.vue 消息编号：{{id}} 消息标题：{{title}} Home.vue Home组件内容 News Message Message.vue {{m.title}} push查看 replace查看 News.vue 欢迎学习Vue news001 news002 news003 router index.js // 该文件专门用于创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from '../pages/About' import Home from '../pages/Home' import News from '../pages/News' import Message from '../pages/Message' import Detail from '../pages/Detail' //创建并暴露一个路由器 export default new VueRouter({ routes:[ { name:'guanyu', path:'/about', component:About }, { path:'/home', component:Home, children:[ { path:'news', component:News, }, { path:'message', component:Message, children:[ { name:'xiangqing', path:'detail', component:Detail, //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。 // props:{a:1,b:'hello'} //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。 // props:true //props的第三种写法，值为函数 props($route){ return { id:$route.query.id, title:$route.query.title, a:1, b:'hello' } } } ] } ] } ] }) App.vue About Home main.js //引入Vue import Vue from 'vue' //引入App import App from './App.vue' //引入VueRouter import VueRouter from 'vue-router' //引入路由器 import router from './router' //关闭Vue的生产提示 Vue.config.productionTip = false //应用插件 Vue.use(VueRouter) //创建vm new Vue({ el:'#app', render: h =; h(App), router:router })

原文地址：https://www.cnblogs.com/chuixulvcao/p/17311375.html

【本文地址】

公司简介

联系我们