安装和配置

1、react18.3 安装和配置

2-1、 安装

  npm install react-router-dom

2-2、 配置

1. router文件夹 ==> router.ts
2. router.ts路由内容

    import { lazy } from 'react'
    import React from 'react'
    import { createBrowserRouter } from 'react-router-dom'
    import type{ RouteObject } from 'react-router-dom'
   
    const Home = lazy(() => import('../views/Home'))
    const About = lazy(() => import('../views/About'))
    const Login = lazy(() => import('../views/Login'))
   
    const routers: RouteObject[] = [
    {
    path: '/',
    element: React.createElement(Home)
    },
    {
    path: '/about',
    element: React.createElement(About)
    },
    {
    path: '/login',
    element: React.createElement(Login)
    }
    ]
    const router = createBrowserRouter(
    routers
    )
    export default router

3. 配置main.ts

 import { StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
 import router from './router/router'
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <Suspense>
             <RouterProvider router={router} />
         </Suspense>
     </StrictMode>
 )

2、小程序 安装和配置

app.json配置路由

  {
     "entryPagePath": "pages/index/index",
     "pages": [
         "pages/index/index",
         "pages/list/list",
         "pages/cate/cate",
         "pages/profile/profile",
         "pages/test/test",
         "pages/test1/test1"
     ]
   }

3、vue3.5 安装和配置

• 3-1、 安装

    npm install vue-router

• 3-2、 配置

  1. router文件夹 ==> router.ts

  2. 选择路由模式（无路径、正常路径、hash带#路径）

     拷贝代码

          import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router'
          import HomeView from '../views/HomeView.vue'
          import AboutView from '../views/AboutView.vue'
     
          const routes:Array<RouteRecordRaw> = [
              { path: '/', component: HomeView },
              { path: '/about', component: AboutView }
          ]
     
          const router = createRouter({
              /*
              无路径(createMemoryHistory)
              正常路径(createWebHistory)
              hash带#路径(createWebHashHistory)
              */
              history: createWebHashHistory(),
              routes
          })
          export default router

  3. 配置main.ts

     拷贝代码

      import router from './router/router.ts'
      createApp(App).use(router).mount('#app')

  4. 配置App.vue

     拷贝代码

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