Nano Hash - криптовалюты, майнинг, программирование

Точка Vue Router Webpack в параметрах

Я создаю приложение с NodeJS/Express для задней панели и VueJS для передней панели, используя Vue Cli и webpack.

Я хотел бы знать, есть ли способ разрешить точку в параметрах для моих маршрутов.

Вот что я получаю, когда пытаюсь без конфигурации

Не удается получить /t/firstname.lastname

Вот мой /src/main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import VueAutosize from 'vue-autosize'

import Main from './components/Main.vue'
import Signin from './components/Signin.vue'

// We want to apply VueResource and VueRouter
// to our Vue instance
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(VueAutosize)

const router = new VueRouter({
  history: true
})

// Pointing routes to the components they should use
router.map({
  '/t/:person': {
    component: Main
  },
  '/signin': {
    component: Signin
  }
})

router.beforeEach(function (transition) {
  if (transition.to.path === '/signin' && window.localStorage.length !== 0) {
    transition.redirect('/')
  } else if (transition.to.path === '/' && window.localStorage.length === 0) {
    transition.redirect('/signin')
  } else {
    transition.next()
  }
})

// Any invalid route will redirect to home
router.redirect({
  '*': '/404'
})

router.start(App, '#app')

  • Я считаю, что vue-router преобразует параметр в URL-адресе в объект javascript, поэтому использование точки не допускается. Но я проверил с другими знаками препинания, и все в порядке. Вы можете использовать регулярное выражение или необязательный параметр, если хотите › >https://github.com/vuejs/vue-router/blob/9649929b3646954c7b59d149c570c3d0a96379c9/examples/route-matching/app.js 30.12.2016
  • @utiiz Вы нашли решение? У меня такая же проблема. 18.02.2017
  • Как это связано с Webpack? 05.09.2017
  • Это проблема веб-пакета, у них есть правило, согласно которому, если в uri есть точка, то это файл, это происходит на сервере экспресс-разработки. 29.09.2017

Ответы:


1

Я имел дело с той же проблемой, даже я опоздал на разговор, может быть, кому-то пригодится решение, которое я нашел.

Похоже, это вина веб-пакета.

Если вы используете шаблон веб-пакета vue-cli, вам необходимо настроить прокси для нужных вам маршрутов. Например, в вашем случае вам нужно будет добавить это в файл config/index.js:

...
dev: {
  ...
  proxyTable: {
    '/t/*.*': { // this will match all urls with dots after '/t/'
      target: 'http://localhost:8080/',  // send to webpack dev server
      router: function (req) {
        req.url = 'index.html'  // Send to vue app
      }
    }
    // Any other routes you need to bypass should go here.
  }
  ...
},
...

Таким образом, веб-пакет будет передавать все запросы на этот URL-адрес и не будет обрабатывать их как файлы.

21.01.2018

2

Добавьте /something после параметров, например: в вашем маршруте

{
  path: your-route/:paramname/something",
  component: somecomponent,
}

После этого вы сможете получить доступ к маршруту, используя this.$route.params.paramname

17.03.2020

3

сделать ниже настройку в веб-пакете

devServer: {
      historyApiFallback: {
          disableDotRule: true
      }
 }
02.03.2021
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..