Миграция на VUE 3, не работает роутер?

Question

[Tereverda]

Не работает роутер, не могу найти причину, как исправить.

// CDN подключаю в шапке html
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

import VueRouter from 'vue-router'

const app = Vue.createApp({
  delimiters: ['[%', '%]'],
  data () {
    return {
    }
  },
  // Работа с данными
  methods: {
  },
  watch: {
  },
  mounted: function () {
  },
});

// VueRouter
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  // mode: 'history', - я так понял верхняя строка заменяет после обновления
  routes: []
});

app.use(router);
app.mount('#app');

Answer 1

[0xD34F]

Для vue 3 предназначена четвёртая версия роутера, а не третья:

- <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
+ <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

А вот это надо вырезать:

import VueRouter from 'vue-router'

Comments

[Tereverda]

дай Бог вам здоровья мил человек!

[Tereverda]

в целом запустилось, но теперь vue не видит данные их роутера с get параметрами, и живую здесь можно посмотреть

должны передаться размеры ?length=300&width=300&height=300#/
параметров нет, по этому скрипт подставляет значения по умолчанию пр 100

data () {
    return {
      // Данные из формы в мм.
      length: this.$route.query.length ?? 100,
      width: this.$route.query.width ?? 100,
      height: this.$route.query.height ?? 100,
    }
  },