Skip to main content

[VueJS] vue-router

· 2 min read

호출되는 router에 따라 동적으로 title이나 메시지가 변경되도록 하는 방법

header tag 내부의 title 변경하기​

const routes = [
  {
    path: '/user',
    component: USER,
    meta: { title: 'User Page' },
  },
];

const router = new Router({
  mode: 'history',
  routes,
});

router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
});

header tag 내부의 favicon 변경하기​

const routes = [
  {
    path: '/user',
    component: USER,
    meta: {
      title: 'User Page',
      favicon: '/static/favicon.ico',
    },
  },
];

const router = new Router({
  mode: 'history',
  routes,
});

router.beforeEach((to, from, next) => {
  document
    .querySelector('link[rel="shortcut icon"]')
    .setAttribute('href', meta.favicon);
});

파라미터 전달​

const routes = [
  {
    path: '/user',
    component: USER,
    meta: { title: 'User Page' },
    props: { msg: 'hello' },
  },
];

User 컴포넌트에서는 props로 전달을 받는다.

export default {
  name: 'User',
  props: {
    msg: {
      type: String,
    },
  },
};

만약, User의 상위 객체에 해당 값을 전달하고자 하면 다음과 같이 전달하면 된다.

방법 1)​
// User.vue
export default {
  name: 'User',
  props: {
    msg: {
      type: String,
    },
  },
  created() {
    this.$parent.$data.msg = this.msg;
  },
};
방법 2)​

(router의 meta를 이용하는 방법이 더 간단하고 깔끔한 것 같다) 즉, router에서 meta에 해당 객체를 담아서 전달

// App.vue
export default {
  name: 'App',
  data() {
    return {
      bannerData: {},
    };
  },
  components: {
    AppBanner,
    AppFooter,
  },
  created() {
    this.bannerData = this.$route.meta.banner;
  },
};