参数中的Vue Router Webpack Dot

时间:2016-12-06 20:48:45

标签: url webpack vue.js parameters

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

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

这是我在没有配置时尝试的内容

Cannot GET /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')

3 个答案:

答案 0 :(得分:1)

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

这似乎是webpack的错。

如果使用vue-cli的webpack模板,您需要为所需的路由配置代理。例如,在您的情况下,您需要将其添加到$ERROR = 0; $ARR_ERROR = array(); if ($stmt->execute([$emailadd]) > 0 ) { $ERROR = 1; $ARR_ERROR['error'][] = "Email already exist!"; } if ($stmt->execute([$rdate]) > 0 ) { $ERROR = 1; $ARR_ERROR['error'][] = "Date already exist!"; } // You can add more if statement here // Show errors if there is if($ERROR == 1){ foreach($ARR_ERROR['error'] as $singleError){ echo $singleError; } } 文件中:

config/index.js

这样,webpack就会代理对该网址的所有请求,并且不会将这些请求视为文件。

答案 1 :(得分:0)

在参数后添加/something 例如:您的路线

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

此后,您应该可以使用this.$route.params.paramname

访问路线

答案 2 :(得分:0)

在 webpack 中做以下设置

devServer: {
      historyApiFallback: {
          disableDotRule: true
      }
 }