Question

我一直在从事像页面一样的电子商务作为附件图像，现在我正在尝试使用vue-router进行基本相同的操作。

在以前的版本中（无vue-routing），我可以浏览不同的页面，例如从“首页”到“购物车”页面，如所附图像所示，但是当我尝试对vue-routing执行相同操作时，不要跳转到购物车页面。除了点击“购物车”标签外，我还尝试添加

/#/cart

直接在网址末尾输入

，但这也不起作用。

此刻，我正在观看一系列视频讲座，因此，我指的是所提供的示例代码。因此，如果它是由某些键入错误引起的，则会出现一些错误消息，例如

"undefined XXX"
"cannnot find XXX"
etc

显示在控制台上。

但是控制台上没有显示错误消息，因此很难确定从哪里开始查找此错误的原因。

我在Stack Overflow上发现了关于vue-routing的另一个问题，但是在特定情况下导致错误的原因是他/她试图直接在路由配置中引用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，并启用并注册了它。

Vue.js路由不起作用时，常见的错误有哪些？

0 个答案: