yb课堂 开发前端项目路由 《三十五》

Vue-Router开发前端项目路由

• vue-router
  • 是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌
  • 官方文档：https://router.vuejs.org/zh/

路径：src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home/Home.vue'
import CourseDetail from '../views/CourseDetail/CourseDetail.vue'
import Login from '../views/Login/Login.vue'
import Order from '../views/Order/Order.vue'
import Pay from '../views/Pay/Pay.vue'
import Personal from '../views/Personal/Personal.vue'
import Register from '../views/Register/Register.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/coursedetail",
    name: "CourseDetail",
    //按需加载
    component: ()=>import("../views/CourseDetail/CourseDetail.vue")
    //component: CourseDetail
  },
  {
    path: "/login",
    name: "Login",
    component: Login
  },
  {
    path: "/order",
    name: "Order",
    component: Order
  },
  {
    path: "/pay",
    name: "Pay",
    component: Pay
  },
  {
    path: "/personal",
    name: "Personal",
    component: Personal
  },
  {
    path: "/register",
    name: "Register",
    component: Register
  }
]

const router = new VueRouter({
  routes
})

export default router