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

默认打开的是HomeView路由组件

url后接/about切换到另一个路由组件

router-link和a标签的区别
router-link-exact的应用结果