SkipTyler
@SkipTyler
Junior+ Front-End developer

Как достучаться к $route в vue + ssr?

Всем привет.
Есть приложение на vue + ssr. Конфиг брал тут

Для seo мне нужно генерировать meta теги. Для этого у меня есть миксин, который используется глобально.

const serverHeadMixin = {
  created() {
    const { head } = this.$options;

    if (head) {
      const {title} = head;
      if (title)
        this.$ssrContext.title = getString(this, title);

      const {meta} = head;
      if (meta)
        this.$ssrContext.meta = `\n${getMeta(this, meta, true)}`
    }
  }
};


Он берет данные из head

Сам head размещен в компоненте.

head: {
   title: 'title',
   meta: []
},

И вот тут мне нужно обратится к $route.params

У меня получилось достучаться до i18n, который есть в проекте таким образом.

<script>
    import { createI18n } from 'Util/i18n';
    const i18n = createI18n();
    export default {
...


и использовать его в head title: i18n.t('meta.mainPage.title')

сам i18n.js

export function createI18n () {
	return new VueI18n({
		locale: 'ua',
		fallbackLocale: 'ua',
		messages: {...}
	})
}


Но вот с роутером никак.
Мне нужно получить параметры текущего роута.
Как это можно сделать?

файл router/index.js
export function createRouter(i18n) {
    const router =  new Router({
        mode: 'history',
        fallback: false,
        routes: [...]
    });
    return router;
}


У меня получилось достучаться к роутеру так
import { createApp } from '../app';
const { router } = createApp();


Но currentRoute мутабельный объект

файл app.js
import Vue from 'vue'
import App from './App'
import { createStore } from './store'
import { createRouter } from './router'
import { createI18n } from "Util/i18n";
import { sync } from 'vuex-router-sync'
import headMixin from './util/title'


Vue.mixin(headMixin);

export function createApp () {
  const store = createStore();
  const i18n = createI18n();
  const router = createRouter(i18n);


  sync(store, router);
  
  const app = new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
  });

  return { app, router, store }
}
  • Вопрос задан
  • 180 просмотров
Решения вопроса 1
SkipTyler
@SkipTyler Автор вопроса
Junior+ Front-End developer
Пересмотрел конфиг, и понял, что сделал не так.

Добавил себе ф-ю
const getHead = vm => {
  const { head } = vm.$options
  if (head) {
    return typeof head === 'function'
        ? head.call(vm)
        : head
  }
}


Сам head сделал ф-ей, которая возвращала нужный объект, и проблема решилась)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы