vue的路由组件的引入以及路由组件懒加载和router-link

App.vue

<template>   <div>     <router-link to="/">首页</router-link>     <router-link to="/about">关于</router-link>     <router-link to="/zhu">猪</router-link>     <!-- 用a标签会导致页面全部重新加载,router-link则只是局部加载 -->     <a href="/sky">sky</a>     <!-- 什么是路由系统：就是创建多页网站      原生开发是整个页面切换     现代开发方式是局部切换，全称为single page aplication单页应用-->     <!-- 需求：根据路径切换页面显示的组件      view文件夹是用来放路由器的组件的-->     <div id="box">       <!-- 什么是router-view就是路由的占位符,它会根据具体的路径切换对应路由组件-->       <router-view />     </div>   </div> </template>  <script> export default {} </script>  <style lang="scss" scoped> #box {   background-color: orange;   padding: 10px; } // router-link最终表现出来的是a标签,所以css用a标签修饰 a {   margin: 10px;   display: inline-block;   padding: 10px;   text-decoration: none;   background-color: palevioletred;   opacity: 0.8;   transition: 0.3s;   &:hover {     opacity: 1;     border-radius: 4px;   } } // router-link会自动为当前项设置active激活class /*一个是router-link-active 这个是模糊匹配例如路径是/a/b/c 与之模糊匹配的有四个,一个是/,一个是/a,一个是/a/b/c 也就是一个路径下的的父级路径下的也会匹配激活状态*/ a.router-link-active {   background-color: rgb(172, 104, 236); } /*router-link-exact-active excat就是精确的*/ a.router-link-exact-active {   border: 2px dashed brown; } </style>

zhu.vue&sky.vue&HomeView.vue&AboutView.vue

<template>   <div>     <h1>hello,我是sky</h1>   </div> </template>  <script> export default {} </script>  <style lang="scss" scoped> </style>

router下的index引入路由组件

import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' import zhu from "../views/zhu.vue" //import sky from "../views/sky.vue"  /*最合理的加载方式：常用的页面用import，在进入页面的时候就已经加载完 不常用的页面就用懒加载的箭头函数，只有在被调用的时候才会被引入*/  Vue.use(VueRouter)  const routes = [   {     path: "/zhu",     component: zhu,     // name是后期调bug用的,说明这个组件是给谁用的     name: "zhu"   },   {     path: "/sky",     component: sky,     // name是后期调bug用的,说明这个组件是给谁用的     name: () => import("../views/sky.vue")   },   {     path: '/',     name: 'home',     component: HomeView   },   {     path: '/about',     name: 'about',     // route level code-splitting     // this generates a separate chunk (about.[hash].js) for this route     // which is lazy-loaded when the route is visited.     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')   } ]  const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes })  export default router