参数中的 Vue Router Webpack Dot答案

【问题标题】：Vue Router Webpack Dot in Params参数中的 Vue Router Webpack Dot
【发布时间】：2017-04-21 15:17:53
【问题描述】：

我正在使用 Vue Cli 和 webpack 创建一个应用程序，后端使用 NodeJS/Express，前端使用 VueJS。

我想知道是否有办法在我的路线的参数中允许点。

这是我尝试不使用配置时得到的结果

这是我的 /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中的param转换成javascript对象，所以不允许使用point。但我用其他标点符号测试过，没关系。如果需要，可以使用正则表达式或可选参数 >https://github.com/vuejs/vue-router/blob/9649929b3646954c7b59d149c570c3d0a96379c9/examples/route-matching/app.js
@utiiz 你找到解决方案了吗？我也有同样的问题。
这和 Webpack 有什么关系？
这是一个 webpack 问题，他们有一个规则，如果 uri 有一个点，那么它就是一个文件，它发生在 express 开发服务器上。

标签： url webpack vue.js parameters

【解决方案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，而不是将它们视为文件。

【讨论】：

【解决方案2】：

在参数后添加/something 例如：在你的路线中

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

在此之后，您应该可以使用this.$route.params.paramname 访问路由

【讨论】：

【解决方案3】：

在 webpack 中进行以下设置

devServer: {
      historyApiFallback: {
          disableDotRule: true
      }
 }

【讨论】：