Vue3学习

vue3 填坑指南

使用 [email protected] (vue3注册使用路由)

• new Router 变成 createRouter

// 以前是
// import Router from 'vue-router'
// 现在是 
import { createRouter } from 'vue-router'

const router = createRouter({
  // ...
})

• 新的 history 配置取代 mode
  mode: 'history'配置已经被一个更灵活的 history 配置所取代。根据你使用的模式，你必须用适当的函数替换它：

  • “history”: createWebHistory()
  • “hash”: createWebHashHistory()
  • “abstract”: createMemoryHistory()

• 移动了 base 配置

• 现在，base 配置被作为 createWebHistory (其他 history 也一样)的第一个参数传递：

import { createRouter, createWebHistory } from 'vue-router'
   
   createRouter({
   history: createWebHistory('/leaf/'),
   routes: [{
       name: 'login',
       path: '/login',
       component:() => import('@/pages/index')
   }],
   })

• 去访问 /login
• 
• 删除了*（星标或通配符）路由
  • 现在必须使用自定义的 regex 参数来定义所有路由(*、/*)：

  const routes = [
        // pathMatch 是参数的名称，例如，跳转到 /not/found 会得到
        // { params: { params: { pathMatch: ['not', 'found'] }}
        // 这要归功于最后一个 *，意思是重复的参数，如果你
        // 打算直接使用未匹配的路径名称导航到该路径，这是必要的
        { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
        // 如果你省略了最后的 `*`，在解析或跳转时，参数中的 `/` 字符将被编码
        { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
    ]
    // 如果使用命名路由，不好的例子：
    router.resolve({
    name: 'bad-not-found',
    params: { pathMatch: 'not/found' },
    }).href // '/not%2Ffound'
    // 好的例子:
    router.resolve({
    name: 'not-found',
    params: { pathMatch: ['not', 'found'] },
    }).href // '/not/found'

router.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        name: 'home',
        path: '/',
        component: () => import('@/pages/index')
    }, {
        name: 'login',
        path: '/login',
        component:() => import('@/pages/index')
    }, { //  匹配未找到的路由
        name: 'notfound',
        path: '/:pathMatch(.*)*', // 任意字符匹配 0次 或 多次
        component: () => require("@/components/notfound"),
    }
];
// 创建路由实例并传递 `routes` 配置
const router = createRouter({
    history: createWebHistory(), // 使用 H5 history 模式  （mode: 'history' 配置已经被一个更灵活的 history 配置所取代）
    routes
})
 
export default router;

main.js

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

// 引入路由配置文件
import router from './js/common/router'

// 创建根实例
let app = createApp(App);

// 将路由文件注册到全局
app.use(router);
// 挂载根实例
app.mount('#app')

---

• <router-view>、<keep-alive> 和 <transition>
  • transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用：

  <router-view v-slot="{ Component }">
    <transition>
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </transition>
  </router-view>