2016-12-06 29 views
6

Tôi đang tạo một ứng dụng với NodeJS/Express cho mặt sau và VueJS cho Mặt trận bằng cách sử dụng Vue Cli và webpack.Vue Router Webpack Dot in Params

Tôi muốn biết liệu có cách nào cho phép dấu chấm trong thông số cho tuyến đường của tôi hay không.

Dưới đây là những gì tôi nhận được khi tôi cố gắng không có cấu hình

Cannot GET /t/firstname.lastname

Dưới đây là /src/main.js tôi

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') 
+1

Tôi tin rằng vue-router chuyển đổi param trong url thành một đối tượng javascript, do đó, việc sử dụng một điểm không được phép. Nhưng tôi đã thử nghiệm với các dấu câu khác và không sao cả. Bạn có thể sử dụng tham số regexp hoặc tùy chọn nếu bạn muốn> [https://github.com/vuejs/vue-router/blob/9649929b3646954c7b59d149c570c3d0a96379c9/examples/route-matching/app.js](https://github.com/ vuejs/vue-router/blob/9649929b3646954c7b59d149c570c3d0a96379c9/ví dụ/tuyến đường khớp/app.js) –

+0

@utiiz Bạn đã tìm thấy giải pháp chưa? Tôi có cùng một vấn đề. –

+0

Điều này liên quan đến Webpack như thế nào? –

Trả lời

1

tôi đã đối phó với vấn đề tương tự, thậm chí tôi Muộn cuộc trò chuyện có lẽ ai đó sẽ tìm thấy giải pháp hữu ích mà tôi tìm thấy.

Dường như lỗi của webpack.

Nếu sử dụng mẫu webpack của vue-cli, bạn sẽ cần định cấu hình proxy cho các tuyến đường bạn cần. Ví dụ trong trường hợp của bạn, bạn sẽ cần phải thêm video này vào file 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. 
    } 
    ... 
}, 
... 

Bằng cách này webpack ý ủy quyền tất cả các yêu cầu tới địa chỉ đó và không đối xử với chúng như tập tin.

Các vấn đề liên quan