一、Vue3路由入门

Vue3路由的配置和Vue2差不许多哦。要用Vue3路由， 我们得先安装Vue-Router，用npm命令就Neng了：

npm i vue-router@next

然后在main.js里我们要引入Vue-Router：

import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';
const routes = ;
// 创建路由实例
const router = createRouter({
    history: createWebHashHistory,
    routes,
    // 用`routes`配置选项定义路由
});
const app = createApp;
app.use; // 用路由
app.mount;

二、Vue2和Vue3路由有啥不同

Vue3的路由和Vue2不一样的地方就是创建路由实例的方法啦。Vue2是这样的：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use
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还Neng在声明路由时用props属性设置组件参数呢。比如：

const routes = ;

然后 在组件里我们通过props来接收路由参数。比如：

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

四、 Vue3怎么配置公共页面和跳转页面

在Vue3里常常有一些公共页面比如header和footer，它们会出眼下优良几个页面里。我们Neng用layout来定义它们。比如：

const router = createRouter({
    history: createWebHashHistory,
    routes: 
        },
        {path: '/contact', name: 'Contact', component: Contact}
    ]
})

在这玩意儿例子中， 我们定义了一个Layout组件，Home和Aboutdou用了这玩意儿Layout组件。Contact是个独立的页面。在Layout里 我们Neng定义一些公共的元素，比如header和footer，然后用children属性来定义子路由。

要跳转到页面 我们Neng用router-link来实现，比如：

Home
About
Contact

五、Vue3子路由配置讲解

Vue3的子路由配置和Vue2差不许多。比如：

const routes = }
]

在这玩意儿例子中， 我们定义了一个/user路由，里面有两个子路由。然后在User组件里 我们Neng用来kan得出来子路由的内容：

    
User Page
    Profile
    Posts
    

六、Vue3动态路由详解

Vue3里我们Neng用动态路由，比如：

const routes = 

在这玩意儿例子中，我们用了:id来表示一个动态的路由，它Neng匹配到随便哪个/user/后面的路径，并将路径保存到$route.params.id中。

Vue3里我们还Neng用一个新鲜的关键字来配置子路由，就是：children。比如：

const routes = }
]

在这玩意儿例子中， 我们用了children来配置/user路由的子路由，其中，空字符串表示默认路由，也就是/user的首页。在User组件里我们Neng用不同的子路由来kan得出来。

Vue3里我们还Neng用keep-alive标签来实现路由缓存。比如：

在这玩意儿例子中，我们用$router.meta.keepAlive属性来判断当前路由是不是需要缓存。Ru果需要缓存，就用来包装。

关于Vue3路由的geng许多内容，Neng参考Vue官方文档中的路由有些：https://v3.cn.vuejs.org/guide/routing.html