vue 公用页面引用_vue中实现部分页面引入公共组件

前言

我们可以把公共组件放到App.vue中，但是有时候我们希望某个页面不需要这写公共部分，那么需要怎么设置呢？

本文为大家介绍三种部分页面引入公共组件的方法。

方法一：利用子路由创建一个layout页面来存放公共部分(页头、页脚、侧边栏)

在router/index.js中给想使用公共部分的页面添加子路由export default new Router({

routes: [

{

path: "/",

component: Layout,

redirect: "/dashboard",

children: [

{

name: "Dashboard",

path: "dashboard",

component: () => import("@/views/home/Index")

}

]

},

{

name: "Login",

path: "/login",

component: () => import("@/views/login/index")

}

]

});

方法二：结合$route.meta在App.vue中

在router.js中配置想要显示公共组件的meta.keepAlive值为true，反之则是false{

path: '/home',

name:　"Home",

component: Home,

meta: {

keepAlive: true

}

},

{

path: '/login',

name:　"Login",

component: Login,

meta: {

keepAlive: false

}

},

方式三：利用路由判断是否显示在App.vue中利用v-if判断当前路由是否显示，并用watch来监听路由的改变

import HomeHeader from './components/header/Header'

import HomeAside from './components/aside/Aside'

export default {

name: 'App',

data(){

return{

path:''

}

},

components: {

HomeHeader,

HomeAside,

},

// 判断路由

mounted() {

this.path = this.$route.path;

// console.log(this.$route.path)

},

watch:{

$route(to,from){

this.path = to.path

}

}

}