Javascript 首先尝试使用vue.js。使用路由器的问题_Javascript_Vue.js_Vuejs2_Vue Component_Vue Router

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

javascript vue.js vuejs2

Javascript 首先尝试使用vue.js。使用路由器的问题,javascript,vue.js,vuejs2,vue-component,vue-router,Javascript,Vue.js,Vuejs2,Vue Component,Vue Router,我实际上是Javascript和vue.js的初学者我按照教程创建了一个购物单页应用程序，我学习了路由器，所以我想在这个学习项目中使用它们控制台中有一些有趣的错误有人能解释一下我哪里做错了什么吗 index.html： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&

我实际上是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>


文件
购物车


{{item.label}{{item.cost}}欧元

总计={{getTheTotal}}欧元

以及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')

const banana={template:'in banana'}
const Apples={template:'in Apples'}
const Pears={template:'in apples'}
const Cars={template:'in apples'}
常量路由器=新的VueRouter({
路线：[
{path:'/bananas'，组件：bananas}，
{路径：'/apples'，组件：apples}，
{路径：'/pears'，组件：pears}，
{路径：'/cars'，组件：cars}
]
})
const app=新的Vue({
el:“应用程序”，
数据：{
购物车：[
{标签：“苹果”，成本：2，选择值：false，url:'https://i2.wp.com/ceklog.kindel.com/wp-content/uploads/2013/02/firefox_2018-07-10_07-50-11.png，链接：“/apples”}，
{标签：“梨”，成本：3，选择值：false，url:'https://post.healthline.com/wp-content/uploads/2018/11/10617-Do_You_Have_a_Pear_Allergy-_732x549-thumbnail.jpg，链接：“/pears”}，
{标签：“香蕉”，成本：5，选择：假，url:'https://media.lactualite.com/2014/08/banane.jpg，链接：“/bananas”}，
{标签：“汽车”，成本：5000，选择：假，url:'https://specials-images.forbesimg.com/imageserve/5d3703e2f1176b00089761a6/960x0.jpg?cropX1=836&cropX2=5396&cropY1=799&cropY2=3364，链接：“/cars”}
]
},
计算：{
getTheTotal（）{
设rez=0
this.shoppingCart.forEach（元素=>{
如果（element.selected==true）{
rez+=要素成本
}
控制台日志（rez）
})
返回雷兹
}
},
方法：{
附加项：功能（项目）{
如果（item.selected==false）
item.selected=true
else if（item.selected==true）
item.selected=false
},
isSelected:功能（项目）{
如果（item.selected==true）
返回（“删除”）
如果（item.selected==false）
返回（“添加”）
}
}
}).$mount（“#应用程序”）

错误：

[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 warn]：呈现中出错：“TypeError:无法获取未定义或空引用的属性“matched”
（位于）
TypeError:无法获取未定义或空引用的属性“匹配”
[Vue warn]：找不到元素：#应用程序
[Vue warn]：呈现错误：“TypeError:无法获取未定义或空引用的属性“matched”
（位于）
TypeError:无法获取未定义或空引用的属性“匹配”

页面不再显示任何内容

非常感谢！：）

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

您没有将

路由器

对象传递给

新Vue

调用，因此应用程序不知道路由器/路由：

const-app=新的Vue({
路由器，//✅ 加上这个
el:“应用程序”，
...
});

您还需要在

to

属性上使用

：

绑定，如下所示：

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

const banana={template:'in banana'}
const Apples={template:'in Apples'}
const Pears={template:'in Pears'}
const Cars={template:'in Cars'}

在声明Vue实例之前，您需要调用

Vue。请使用（路由器）

。

您实际有哪些错误？：）很多[Vue warn]：呈现错误：“TypeError:无法获取未定义或空引用的属性“matched”（在中找到）TypeError:无法获取未定义或空引用的属性“matched”[Vue warn]：找不到元素：#app[Vue warn]：呈现错误：“TypeError:无法获取未定义或空引用的属性“matched”（在中找到）TypeError:无法获取未定义或空引用的属性“matched”``谢谢！我应该将此行放在哪里？在

const app=new Vue（{