Каковы распространенные ошибки, когда маршрутизация Vue.js не работает? - PullRequest
Новая
       29

Каковы распространенные ошибки, когда маршрутизация Vue.js не работает?

0 голосов
/ 27 июня 2019

Я работал над страницей, похожей на электронную коммерцию, как прикрепленные изображения, и теперь я пытаюсь сделать то же самое, используя vue-router.

e-commerce cart

В предыдущей версии (без vue-маршрутизации) я мог перемещаться по разным страницам, например изс главной страницы на страницу корзины, показанную в виде прикрепленных изображений, но когда я попытался сделать то же самое с vue-routing, я не смог перейти на страницу корзины.Помимо простого нажатия на вкладку «Корзина», я также попытался добавить 

/#/cart

в конце URL-адреса, введя его напрямую, но это тоже не сработало.

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

"undefined XXX"
"cannnot find XXX"
etc

.

Но на консоли не отображается сообщение об ошибке, поэтому сложно определить, с чего начать искать причину этой ошибки.

Я обнаружил еще один вопрос о vue-routing в Stack Overflow, но причиной ошибки для этого конкретного случая было то, что он / она пытался напрямую ссылаться на HTML-файлы в конфигурации маршрута, чего я не делаюдумаю, что-то связано с моей проблемой, поэтому я думаю, что мне нужно задать свой собственный вопрос.

Ниже приведены некоторые части кода для этой электронной коммерции, например, учебного приложения.

main.js 

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import ProductList from './ProductList.vue';
import Cart from './Cart.vue';

Vue.filter('currency', function(value){
  let formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFranctionDigits: 0
  });

  return formatter.format(value);
});

export const eventBus = new Vue();

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '', component: ProductList },
    { path: '/cart', component: Cart}
  ],
  mode: 'history'
});

new Vue({
  el: '#app',
  render: h => h(App),
  router: router
})

App.vue (только часть шаблона) 

<template>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">E-commerce Inc.</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>
                    <div class="nav navbar-nav navbar-right">
                        <div class="stats">{{ cart.items.length }} 
                          <template v-if="cart.items.length == 1">item</template><template v-else>items</template>in cart, totalling {{ cartTotal | currency }}
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <router-view :cart="cart"></router-view>
    </div>
</template>

Может ли быть что-то не так с содержимым кода или же я не установил что-то жизненно важное для vue-маршрутизации?Пока что я хотя бы установил vue-router, а также включил и зарегистрировал его.

...