A
A
Alexander Florenko2019-09-02 01:23:47
Vue.js
Alexander Florenko, 2019-09-02 01:23:47

How to reach $route in vue + ssr?

Hello.
There is an application on vue + ssr. I took the config here
For seo, I need to generate meta tags. To do this, I have a mixin that is used globally.

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)}`
    }
  }
};

It takes data from head
The head itself is placed in the component.
head: {
   title: 'title',
   meta: []
},

And here I need to turn to $route.params
I managed to get through to i18n, which is in the project in this way.
<script>
    import { createI18n } from 'Util/i18n';
    const i18n = createI18n();
    export default {
...

and use it in head i18n.js itselftitle: i18n.t('meta.mainPage.title')
export function createI18n () {
  return new VueI18n({
    locale: 'ua',
    fallbackLocale: 'ua',
    messages: {...}
  })
}

But here with a router in any way.
I need to get the parameters of the current route.
How can I do that?
router/index.js file
export function createRouter(i18n) {
    const router =  new Router({
        mode: 'history',
        fallback: false,
        routes: [...]
    });
    return router;
}

I managed to reach the router like this
import { createApp } from '../app';
const { router } = createApp();

But currentRoute is a mutable object in the
app.js file
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 }
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Florenko, 2019-09-02
@SkipTyler

I reviewed the config, and realized what I did wrong.
Added a f-th

const getHead = vm => {
  const { head } = vm.$options
  if (head) {
    return typeof head === 'function'
        ? head.call(vm)
        : head
  }
}

The head itself made a function that returned the desired object, and the problem was solved)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question