作业 —— day81

APP.vue

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 导入实例化的路由对象
import router from "@/router/index"

Vue.config.productionTip = false

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);

//

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,   // 挂载路由对象，将来所有的路由对象的属性或者方法，都可以通过vm对象来操作
  components: { App },
  template: ''
})

// 这里是不能编写任何JS代码的，因为系统不会执行这里来

index.js

import Vue from "vue"
import Router from "vue-router"

// 注册路由组组件
Vue.use(Router)

// 导入组件
// import Home from "../components/Home"
// 在vue中 @表示src目录的路径

import User from "../components/User";
import Home from "../components/Home";
import Login from "../components/Login";
import Register from "../components/Register";
import Goods from "../components/Goods";
import ToDoList from "../components/ToDoList";

// 实例化路由对象，编写路由列表
export default new Router({
  mode: "history",   // 路由显示模式，默认hash，地址栏上面默认的带#，history不会带#
  routes: [    // 路由列表
    {
      path: "/home",        // 访问URL地址
      component: Home,      // 访问URL地址对应的组件
      name: "Home",         // 访问URL的路由别名 ，字符串格式
    },
    {
      path: "/goods",
      component: Goods,
      name: "Goods",
    },
    {
      path: "/todolist",    // 表示路由参数接收的2个参数名
      component: ToDoList,
      name: "ToDoList",
    }
  ]
})

ToDoList.vue

Goods.vue