化妆品网站 源码,做venn图的网站,网络营销怎么理解,南昌网站设计哪个最好VueRouter 路由嵌套
在使用vue开发中#xff0c;可能会碰到使用多层级别的路由。比如#xff1a; 其中就包含了两个主要页面#xff0c;首页#xff0c;详情#xff0c;但是首页的下面又包含了列表#xff0c;喜欢#xff0c;收藏#xff0c;我的四个子路由。 此时就…VueRouter 路由嵌套
在使用vue开发中可能会碰到使用多层级别的路由。比如 其中就包含了两个主要页面首页详情但是首页的下面又包含了列表喜欢收藏我的四个子路由。 此时就需要配置子路由通过使用children
import Vue from vue
import App from ./App.vue
import MyDetail from ./views/MyDetail.vue
import MyFriend from ./views/MyFriend.vue
import MyIndex from ./views/MyIndex.vue
import MyLike from ./views/MyLike.vueimport VueRouter from vue-router
Vue.use(VueRouter)Vue.config.productionTip falseconst router new VueRouter({routes: [//两个主要页面详情和首页{path: /MyIndex, component: MyIndex, //添加children值数组继续写组件和路径children: [{ path: /friend, component: MyFriend },{ path: /like, component: MyLike }]},{ path: /MyDetail, component: MyDetail }]
});
new Vue({render: h h(App),router
}).$mount(#app)keep-alive缓存组件 问题就是在浏览页面的时候已经将页面下滑了然后点击到了某一个文章的详情页最后返回到文章目录时又回到了最顶部就比如我们刷抖音我们往下刷看到一个比较有意思的视频博主点进去看主页然后返回回来结果给我返回到了打开抖音的第一个视频。
所以我们在其中可以使用keep-alive标签解决此问题 直接使用keep-alive包含需要缓存的组件出口
其中他有三个属性
include : 组件名数组只有匹配的组件会被缓存。
exclude:组件名数组任何匹配的组件都不会被缓存。
max :最多可以缓存多少组件实例。
使用如下
templatediv classh5-wrapper//include的参数是一个组件名称数组。keep-alive include[index] max1router-view/router-view/keep-alive/div
/templatescript
export default {name: h5-wrapper,
}
/scriptkeep-alive的使用会触发两个生命周期函数(了解)
activated 当组件被激活 (使用)的时候触发进入页面触发
deactivated 当组件不被使用的时候触发离开页面触发
在被缓存的组件下面就可以使用
templatediv classh5-wrapperdiv classcontent内容/divnav classtabbara href#/article面经/aa href#/collect收藏/aa href#/like喜欢/aa href#/user我的/a/nav/div
/templatescript
export default {name: LayoutPage,//进入页面时触发activated(){alert(欢迎来到首页)},//离开页面时触发deactivated(){}
}
/script
