参数中的Vue Router Webpack Dot

Question

我正在使用Vue Cli和webpack创建一个带有NodeJS/Express背面和VueJS for Front的应用程序.

我想知道是否有办法在我的路线上允许使用参数.

这是我尝试没有配置时得到的

无法获取/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')

Answer 1

我正在处理同样的问题，即使我迟到了，也许有人会发现我找到的解决方案有用。

这似乎是 webpack 的错。

如果使用 vue-cli 的 webpack 模板，您需要为所需的路由配置代理。例如，在您的情况下，您需要将其添加到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.
  }
  ...
},
...

这样，webpack 将代理对该 url 的所有请求，并且不会将这些请求视为文件。