三、vue3+ts项目框架搭建——路由

1. 安装指令

    pnpm install vue-router
   

2. 配置路由文件 /src/router/index.ts

3. 路由文件单独提取

• src\router\index.ts

//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './router'
//创建路由器
const router = createRouter({
  //路由模式hash
  history: createWebHashHistory(),
  routes: constantRoute,
  //滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },
})
export default router

• src\router\router.ts

//对外暴露配置路由(常量路由)
export const constantRoute = [
  {
    //登录路由
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    name: 'login', //命名路由
  },
  {
    //登录成功以后展示数据的路由
    path: '/',
    component: () => import('@/views/home/index.vue'),
    name: 'layout',
  },
  {
    path: '/404',
    component: () => import('@/views/404/index.vue'),
    name: '404',
  },
  {
    // 任意路由：上述匹配不到重定向到404
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    name: 'Any',
  },
]

4. 配置完路由后，需要在mian.ts中注册

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

5. 在App.vue中使用router-view，所有路由都是app.vue的子路由，子路由展示在父路由的router-view占位处

   <template>
     <div>
       <router-view></router-view>
     </div>
   </template>
   

6. 组件内使用路由需要先引入路由对象

7. layout布局