VUE ROUTER

什么是Vue-Router？

Vue路由器是Vue.js的官方路由器，它与Vue.js核心深度集成，使用Vue轻松构建单页应用程序变得轻而易举。功能包括：

• 嵌套路线映射
• 动态路由
• 模块化，基于组件的路由器配置
• 路由参数，查询，通配符
• 查看由Vue.js过渡系统提供动力的过渡效果
• 细粒度的导航控制
• 带有自动活动CSS类的链接
• HTML5历史记录模式或哈希模式
• 可自定义的滚动行为
• 网址的正确编码

路由安装

npm i vue-router@next
复制代码

路由模式

• createWebHistory 创建history路由模式
• createWebHashHistory 创建hash路由模式
• createMemoryHistory 创建基于内存的历史记录

这三种路由方式都有一个可选参数base，为每个URL前面的基本路径，默认为'/'

配置路由

// router/index

import { createRouter, createWebHistory,  RouteRecordRaw } from 'vue-router'
const Login = ()=> import('../views/login/login.vue')
const Home = ()=> import('../views/home/home.vue')
const About = ()=> import('../views/about/about')
const routes: Array<RouteRecordRaw> = [  
    {    path: '/',    name: 'login',    component: Login  },  
    {    path: '/home',    name: 'home',    component: Home,  }, 
    {    path: '/about',    name: 'about',    component: About  },
]
const router = createRouter({  
    history: createWebHistory(),  
    routes
})

export default router
复制代码

// main

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

const app = createApp(App).use(router).mount('#app')
复制代码

新版路由器使用createRouter创建，RouteRecordRaw是内置的类型接口，routes改为必传参数

路由插槽

• append
• event
• tag
• exact

上面列举的4个属性已经不再使用，改为作用域插槽:

<router-link to="/" v-slot="{ href, navigate, isActive }">
  <li :class="{ 'active': isActive }">
    <a :href="href" @click="navigate">
      <span>Home</span>
    </a>
  </li>
</router-link>
复制代码

并且你可以手动在全局添加一个append方法：

app.config.globalProperties.append = (path:any, pathToAppend:any) =>
path + (path.endsWith('/') ? '' : '/') + pathToAppend
复制代码

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

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

现有的router.onReady函数已替换为router.isReady，该函数不接受任何参数并返回Promise

因为现在导航包含第一个都是异步的，所以如果使用transition，需要在挂载dom之前调用isReady：

router.isReady().then(()=> app.mount('#app'))
``