前言

上节介绍了路由的概念，重点介绍了router-link与router-view这两个组件，知道了这些，我们就可以写路由实例在项目中使用了，本节就来介绍一下如何创建路由实例。

定义文件

在项目中路由相关的一般放到router文件夹中，我们先用vite初始化一个项目，这里使用yarn跟ts：

   yarn create vite my-vue-app --template vue

用编辑器打开，在vite.config.ts中将serve的open设置为true，这样运行完项目会自动在浏览器中打开。

  export default defineConfig({
  plugins: [vue()],
  server: {
    open: true
  }
});

初始化的项目中是没有vue router，所以我们先安装下vue-router：

   yarn add vue-router

然后新建一个router的文件夹，在该文件夹下新建一个index.ts文件，在该文件中我们写路由实例。路由必须要有与之对应的vue页面才能显示出来，理解了路由含义，我们就能知道写实例肯定需要定义名称跟对应的组件，理解着去写需求能够更快掌握。

创建实例

createRouter用于创建Router实例，接收一个配置参数，ts接口定义为RouterOptions，常用属性如下：

• routes:路由列表，定义的路由就是放到routes里面。
• history:历史记录模式，后续我们会讲具体的路由模式，一般为createWebHistory。
• scrollBehavior:路由相互条状时，页面的滚动情况。
• end:正则匹配时在结尾是否增加$。
• linkActiveClass:跳转当前路由的样式，跟上节提到router-link的样式是一样的。
• linkExactActiveClass:严格匹配当前跳转的路由的样式。
• parseQuery:解析参数的方式。 重点就是前两个，scrollBehavior也能用到，后续及还未提及的参数用的比较少，了解一下，用的时候翻阅文档即可。 创建实例重点就是routes列表，routes是路由数组，ts接口为RouteRecordRaw[]，RouteRecordRaw就是项目对象类型，由多个联合类型构成。 常见的属性也有对于接口RouteRecordNormalized，具体属性如下：
• path:路由路径。
• name:路由名称。
• component:路由对应的组件。
• children:用于嵌套路由。
• redirect:重定向的路由。
• aliasOf:别名配置。
• beforeEnter:注册路由守卫。
• meta:路由元信息，可以当初补充路由的信息，比如title、icon、roles等属性。 下面就能创建路由实例，在此之前为了方便引入文件，我们先配置一下别名，在vite.config.ts的defineConfig中加上：

 import { resolve } from 'path';
export default defineConfig({
  ...
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
});

resolve是node属性，ts没有相关类型会报错，安装@types/node依赖包就行。

   yarn add @types/node

最后再tsconfig.json文件中添加一下代码：

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

在index.ts文件中引入函数，开始创建实例，首先声明一个routes列表，然后用createRouter创建实例再export。

然后把App.vue文件修改一下，上节我们提到路由必须要用router-view组件才能将对应页面显示出来。 最后我们在mian.ts中引入router，然后use一下就可以了。

   import router from './router';
   app.use(router);

启动项目，在url后面拼个home就能看到home界面，如果我们想要添加新的路由就在routes列表里面添加新的路由对象。

总结

vue-router实例的创建用到了createRouter函数，其中核心是routes列表，对于常见的属性我们要有所了解，实例中的路由都是单个路由，实际项目中往往都是嵌套路由，而且路由往往会很多，针对这些后续我们继续讲解。