首先尝试使用 vue.js。使用路由器的问题答案

【问题标题】：First try with vue.js. Problems using routers首先尝试使用 vue.js。使用路由器的问题
【发布时间】：2021-01-21 14:31:57
【问题描述】：

我实际上是 Javascript 和 vue.js 的初学者。

我按照教程创建了一个购物单页应用程序，并且我了解了路由器，所以我想在这个学习项目中使用它们。

我在控制台中遇到了一些有趣的错误。

谁能解释我哪里做错了？

index.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <h1>Shopping Cart</h1>
        <ul>
            <li v-for="item in shoppingCart">
                {{ item.label }} {{ item.cost }} euros
                <a href="#" @click="addItem(item)"> {{ isSelected(item) }} </a>
            </li>
            <p>total = {{ getTheTotal }} euros</p>
        </ul>
        <li v-for="item in shoppingCart">
            <router-link to="item.link"><img v-if= "item.selected == true"width="150" height="100" :src="item.url"></img></router-link>
        </li>
        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src = "vue.js"></script>
</body>
</html>

和 vue.js：

const Bananas = { template: '<div>in bananas</div>' }
const Apples = { template: '<div>in apples</div>' }
const Pears = { template: '<div>in apples</div>' }
const Cars = { template: '<div>in apples</div>' }

const router = new VueRouter ({
    routes: [
        { path: '/bananas', component: Bananas },
        { path: '/apples', component: Apples },
        { path: '/pears', component: Pears },
        { path: '/cars', component: Cars }
    ]
})

const app = new Vue ({
    el: "#app",
    data: {
        shoppingCart: [
            { label: "Apples", cost: 2, selected: false, url: 'https://i2.wp.com/ceklog.kindel.com/wp-content/uploads/2013/02/firefox_2018-07-10_07-50-11.png', link: "/apples" },
            { label: "Pears", cost: 3, selected: false, url: 'https://post.healthline.com/wp-content/uploads/2018/11/10617-Do_You_Have_a_Pear_Allergy-_732x549-thumbnail.jpg', link: "/pears" },
            { label: "Bananas", cost: 5, selected: false, url: 'https://media.lactualite.com/2014/08/banane.jpg',link: "/bananas" },
            { label: "Cars", cost: 5000, selected: false, url: 'https://specials-images.forbesimg.com/imageserve/5d3703e2f1176b00089761a6/960x0.jpg?cropX1=836&cropX2=5396&cropY1=799&cropY2=3364', link: "/cars" }
        ]
    },
    computed: {
        getTheTotal() {
            let rez = 0

            this.shoppingCart.forEach(element => {
                if (element.selected == true) {
                    rez += element.cost
                }
                console.log(rez)
            })
            return rez
        }
    },
    methods: {
        addItem: function(item) {
            if (item.selected == false)
                item.selected = true
            else if (item.selected == true)
                item.selected = false
        },
        isSelected: function(item) {
            if (item.selected == true)
                return ("remove")
            if (item.selected == false)
                return ("add")
        }
    }
}).$mount('#app')

错误：

[Vue warn]: Error in render: "TypeError: Unable to get property 'matched' of undefined or null reference"

(found in <Root>)

TypeError: Unable to get property 'matched' of undefined or null reference

[Vue warn]: Cannot find element: #app

[Vue warn]: Error in render: "TypeError: Unable to get property 'matched' of undefined or null reference"

(found in <Root>)

TypeError: Unable to get property 'matched' of undefined or null reference

页面不再显示任何内容。

非常感谢！ :)

我也是堆栈溢出的初学者，如果我的帖子有误，请随时告诉我

【问题讨论】：

您实际上有哪些错误？ :)
很多！ ``` [Vue 警告]：渲染错误：“TypeError：无法获取未定义或空引用的“匹配”属性”（在中找到）类型错误：无法获取未定义或空引用的“匹配”属性 [ Vue 警告]：找不到元素：#app [Vue 警告]：渲染错误：“TypeError：无法获取未定义或空引用的属性‘匹配’”（在中找到）TypeError：无法获取属性‘匹配’ ' 未定义或空引用```

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

您没有将 router 对象传递给 new Vue 调用，因此应用程序不知道路由器/路由：

const app = new Vue ({
  router,         // ✅ Add this
  el: "#app",
  ...
});

您还需要在<router-link> to 属性上使用: 绑定，如下所示：

<router-link :to="{ path: item.link }">
  <img v-if="item.selected" width="150" height="100" :src="item.url">
</router-link>

并修复您的数据（四分之三的人说“苹果”）：

const Bananas = { template: '<div>in bananas</div>' }
const Apples = { template: '<div>in apples</div>' }
const Pears = { template: '<div>in pears</div>' }
const Cars = { template: '<div>in cars</div>' }

【讨论】：

【解决方案2】：

您需要在声明您的 Vue 实例之前调用 Vue.use(router)。

【讨论】：

谢谢！我应该把这条线放在哪里？
const app = new Vue ({之前