vue学习笔记（七）：路由

Vue是单页面的网页程序，只有一个页面，页面中的不同的部分会被替换成不同的组件的内容

根据不同的浏览器路径替换不同的组件内容

要建立路径和视图之间的关系，即是路由！

静态导入，缺点是vue会将所有页面组件的代码都加入到页面中造成臃肿。

import Vue from 'vue'
import VueRouter from 'vue-router'

//@是绝对路径的写法，代表的是src目录
import Container from '@/views/views/Container'
import Login from '@/views/views/Login'
import NotFound from '@/views/views/NotFound'


Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    component:Container //主页组件
  },
  {
    path:"/login",
    component:Login //登入页组件
  },
  {
    path:"/404",
    component:NotFound //404页组件
  },
  {
    path:"*",
    component:NotFound
  }
]

const router = new VueRouter({
  routes
})

export default router

动态导入：只有使用到的组件代码才会被动态加载到页面中