Vue3路由学习指南

一、Vue3路由配置

Vue3路由的配置和Vue2基本相同。在Vue3的项目中，我们需要先安装Vue-Router。可以使用npm命令进行安装：

npm i vue-router@next

接下来，在main.js中引入Vue-Router:

import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';

const routes = [
  // 定义路由
  {path: '/', component: Home},
  {path: '/about', component: About},
  {path: '/contact', component: Contact}
];

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes, // 使用`routes`配置选项定义路由
});

const app = createApp(App);
app.use(router); // 使用路由

app.mount('#app');

二、Vue2和Vue3路由区别

Vue3路由相较于Vue2来说最大的变化就是在引入路由实例的方式上。在Vue2中我们使用如下方法:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[]
})

而在Vue3中，我们使用的是createRouter：

import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';

const router = createRouter({
  history: createWebHashHistory(),
  routes, // 使用`routes`配置选项定义路由
});

其中，history的选项要注意，Vue2是通过mode来配置

三、Vue3路由参数

在Vue3中，我们可以在声明路由时使用props属性设置组件参数。例如:

const routes = [
  // 定义路由
  {path: '/user/:id', component: User, props: true}, // 传递路由参数
];

然后，在组件中，我们通过props来接受路由参数。例如：

const User = {
  props: ['id'], // 接收params传递的参数
  template: '<div>UserId: {{id}}</div>'
}

四、Vue3路由配置公共页面和跳转页面

在Vue3中，通常会有一些公共页面，例如header,footer等重复出现在多个页面中的元素，我们可以使用layout来定义。例如：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      children: [
        {
          path: '',
          name: 'Home',
          component: Home
        },
        {
          path: '/about',
          name: 'About',
          component: About
        }
      ]
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

在上面的代码中，我们定义了一个Layout组件，Home和About共用这个Layout组件。Contact是独立的页面。在Layout中，我们可以定义一些公共的元素，如header和footer，同时，通过children属性可以定义子路由。

在跳转页面时，我们可以使用router-link来实现，例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

五、Vue3子路由配置

在Vue3中，子路由的定义也和Vue2基本相同。例如：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

在上面的代码中，我们定义了一个/user路由，它包含了两个子路由。然后在User组件中，我们可以使用<router-view>来显示子路由的内容：

<div>
  <h2>User Page</h2>
  <router-link to="/user/profile">Profile</router-link>
  <router-link to="/user/posts">Posts</router-link>
  <router-view/>
</div>

六、Vue3动态路由讲解

在Vue3中，我们可以使用动态路由，例如：

const routes = [
  { path: '/user/:id', component: User },
]

在上面的代码中，我们使用了:id来代表了一个动态的路由，它可以匹配到任何/user/后面的路径，并将路径保存到$route.params.id中。

七、Vue3配置子路由关键字

在Vue3中，我们可以使用一个新的关键字来配置子路由，即：children。例如：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: '',
        component: UserHome
      },
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

在上面的代码中，我们使用了children来配置/user路由的子路由，其中，”表示默认路由，也就是/user的首页。在User组件中，我们可以使用不同的子路由来使用<router-view>来显示。

八、Vue3路由缓存

在Vue3中，我们可以使用keep-alive标签来实现路由缓存。例如：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

在上面的代码中，我们使用$router.meta.keepAlive属性来判断当前路由是否需要缓存。如果需要缓存，就使用<keep-alive>来包装。

关于Vue3路由的更多内容可以参考Vue官方文档中的路由部分：https://v3.cn.vuejs.org/guide/routing.html