• 章节:38
  • 访问:624
  • 时长:00:12:08
  • 日期:2019-07-05 10:12

目前为止 我们访问的页面 都是只有一个url地址。

添加一个 ShoppingCart.vue 然后替换下面内容上去。

<template>
    <h4 class="bg-primary text-white text-center p-2">
        Placeholder for Cart
    </h4>
</template>

然后我们需要配置路由了。

在src下面 添加一个 router 文件夹

然后 再在里面添加 index.js 文件

添加的内容如下:

import Vue from "vue";
import VueRouter from "vue-router";
import Store from "../components/Store";
import ShoppingCart from "../components/ShoppingCart";
Vue.use(VueRouter);
export default new VueRouter({
    mode: "history",
    routes: [
        { path: "/", component: Store },
        { path: "/cart", component: ShoppingCart },
        { path: "*", redirect: "/"}
    ]
})

然后修改app.vue 配置路由

<template>
    <router-view />
</template>

<script>
//import Store from "./components/Store";
import { mapActions } from "vuex";

export default {
    name: 'app',
    //components: { Store },
    methods: {
        ...mapActions(["getData"])
    },
    created() {
        this.getData();
    }
}
</script>

这里的意思 就是交给 router-view /> 来呈现

clipboard.png