下面路由使用讲解，具体语法可以查看 Vue Router 文档，这里就不做介绍。

• 在router/index.ts文件里面，创建路由，如下所示：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

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

// 无需登录的路由，都可以配置在这里
const constantRoutes: RouteRecordRaw[] = [
  {
    path: '/redirect',
    component: () => import('../layout/index.vue'),
    children: [
     {
        path: '/redirect/:path(.*)',
        component: () => import('../layout/components/Router/Redirect.vue')
      }
    ]
  },
  {
    path: '/iframe/:query?',
    component: () => import('../layout/components/Router/Iframe.vue')
  },
  {
    path: '/login',
    component: () => import('../views/login/index.vue')
  },
  {
    path: '/404',
    component: () => import('../views/404.vue')
  }
]

• 创建路由后，还需要在main.ts里面配置，不然路由不会生效，具体配置如下：

import { router } from './router'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

• 完成上面的步骤后，我们路由就可以正常使用了，只是现在没有其他路由项，只有简单的几个路由。后面的小节会讲解，如何动态的添加其他路由。