持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

开始之前

上一章节中创建项目时候，仅仅是搭建了一个简易的vue项目框架，本章节讲解的vue-router路由的内容需要重新去创建一个项目，在创建项目的时候，把vue-router直接安装进去即可。

安装到这一步的时候，通过⬇选择Router，然后用 空格键选择，最后回车即可确认了。

这一步是询问是否使用history模式创建router，这里我们选择n，就会使用hash模式。
其他的还是一样的直接↩即可完成项目搭建了。

main.js配置

在main.js中会发现，创建app实例的时候，还引用了router的插件。

路由是啥？

这时候我们通过npm run serve启动项目之后，在浏览器里面就可以看到路由效果了。

在浏览器中的地址栏里面将运行起来的 URLhttp://localhost:8081复制进去之后会发现，URL后面会多一个 #
多出来的#就是hash路由的模式了。
#后面有一个/就表示这是根路由。
当我们点击 About 的时候，路由地址就会变成/about 的路径。
路由发生变化之后，页面也会随之发生改变。

路由是指根据url的不同，展示不同的内容。

路由配置

👉 打开router目录下的index.js文件

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

createRouter表示创建一个路由。
是通过vue-router插件库提供的生成路由的代码。

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

在routes数组里面定义了两个对象，里面都是页面所需要的路由项。

path表示URL跳转路径
name表示路由名称
component表示路由访问的组件页面

当我们访问根路由的时候，会去找到HomeView组件，这个组件就是上面通过import引入的。

import HomeView from '../views/HomeView.vue

实际访问的组件是在views目录下的HomeView.vue文件。

但是访问/about路由的时候，component后面是一个箭头函数，并且是用import引入的一个vue文件。

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

用import方式引入的vue文件是一个异步加载的过程，稍后会详细说明。

组件跳转

打开URL的时候，会先进入根组件，也就是HomeView页面。

在HomeView页面中是引用了一个子组件的，上一章节中用过了子组件的内容，所以这里我们把这些不需要的可以删掉。

这时候刷新浏览器之后就会发现只有一个LOGO显示出来了。

此时点击About链接之后，就会进入到AboutView.vue里面。

这个页面的组件中只有This is an about page的内容。

页面上渲染出来的也就是对应的内容

由此可见，还是验证了上面说到的路由原理：路由是指根据url的不同，展示不同的内容。

App组件

👉打开src目录下面的App.vue文件。

模板标签下面有两个router-link标签，刚好对应了页面上的Home和About链接。

router-link标签是跳转路由的标签，可以理解为HTML中的a标签，但是两者是不一样的。

通过点击router-link标签，它会帮你跳到to指向的路径下面。

router-view标签负责展示当前路由对应的组件内容。

如果此时我们把router-view标签删了，那么页面上就不会显示路由跳转之后渲染出来的组件内容了。

新增路由组件

看完上面的内容之后，我们也可以手动尝试添加一个新的路由组件来跳转看看。

首先在views目录下新建一个vue组件，名字可以随意发挥的哦！！
页面上需要渲染的内容也可以随意一点。主要是做一个路由跳转示例而已。

{
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/LoginView.vue')
}

在路由配置页里面就新增一个异步加载组件的方式去写一个配置项。

<router-link to="/login">Login</router-link>

在App.vue里面添加一个router-link标签用来跳转到路由组件。

在浏览器中点击Login链接之后，就会渲染出Login组件了。

异步加载路由组件

上面我们说过在路由配置页里面通过import方式引入组件是一种异步加载的方式渲染的，这种效果可以在浏览器控制台中的Network标签页里面看出效果。

打开浏览器时，默认会加载所有的组件和js文件。
当我们点击Login或者About链接时，才会加载出对应的组件内容和js文件。

如果我们把AboutView和LoginView的路由项都配置成HomeView的方式会怎样呢？

import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import LoginView from '../views/LoginView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  }
]

这时候就可以很直观的看出来效果了，当我们刷新页面的时候，所有需要的文件都会一次性加载出来，再去点击Login或者About链接时，network里面是不会加载新的js文件了。

异步加载路由是为了在加载首页时，不去加载一些暂时不需要或者不是必要的数据文件。可以让首屏页面打开的更快。

当我们使用异步加载路由的方式时，会在跳转页面的时候才去加载和渲染页面内容，此时如果页面过大加载的文件过多的话，也会导致该页面加载速度缓慢。

在项目中使用路由加载方式时，可以根据需要选用合适的方式去配置。

总结

本篇文章主要是和大家一起学习了vue-router的内容，还有一些路由钩子函数的内容在本章节中没有提到，会在后面实战的时候结合项目一起和大家学习。

虽然文章内容是vue-router的基础，但是还是需要好好理解一下的。大家加油💪💪

【Vue3从零开始-第七章】7-2 vue-router路由的理解