vue3注册使用路由，及常用api变更详情

使用 vue-router@4 (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>
  

• 删除 router.match 改为 router.resolve

  • router.match 和 router.resolve 已合并到 router.resolve 中
  • 返回路由地址的标准化版本。还包括一个包含任何现有 base 的 href 属性。

• 将 onReady 改为 isReady

  • 当路由器完成初始化导航时，返回一个 Promise

• scrollBehavior

  • 在页面之间导航时控制滚动的函数。可以返回一个 Promise 来延迟滚动
  • scrollBehavior 中返回的对象与 ScrollToOptions 类似：x 改名为 left，y 改名为 top

• 所有的导航现在都是异步的

  • 所有的导航，包括第一个导航，现在都是异步的，这意味着，如果你使用一个 transition，你可能需要等待路由 ready 好后再挂载程序：

    app.use(router)
    // 注意：在服务器端，你需要手动跳转到初始地址。
    router.isReady().then(() => app.mount('#app'))

• 不存在的命名路由
  • 跳转或解析不存在的命名路由会产生错误：
  • router.resolve({name:‘xxx’})
  • router.push({name:‘xxx’})
• 带参数的路由
  • 在没有传递所需参数的情况下跳转或解析命名路由，会产生错误：
  • router.resolve({name:‘xxx’})
  • router.push({name:‘xxx’})
• 带有空 path 的命名子路由不再添加斜线
  • 嵌套子路由path为 “” 时，去访问不会在父级路由后面添加 ‘/’ ，但要注意 redict 重定向的时候，需要将路径写全，它是相对于 /父级路由 而不是相对于 /父级路由/