Vue-路由（vue2，vue3）的使用-嵌套路由-路由传参-命名

1.路由：一组key和value的组合。

2.基本使用：

        2.1：npm i vue-router (插件)

 3.Vue3.0的使用：

                3.1在main.js中配置：

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

//引入路由器
import router from "@/router";

createApp(App).use(router).mount('#app')

                3.2：创建路由路径并且生成index.js文件

import { createRouter,createWebHistory } from "vue-router";
import Home from "@/components/Home";
import About from "@/components/About";
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/Home',
            component:Home,
        },
        {
            path:'/About',
            component:About,
        },
    ]
})
export default router;

        3.3：导入                ===

About
Home

        3.4:指定组件呈现位置

 

注意：Vue的2版本使用方法：

 四：注意点：

        1.不用的组件都被销毁

        2.通过路由放入的组件叫做路由组件（放在pages中），通过平常组件放入称为一般组件（放在compents中）

     

 五：嵌套路由：

 

 在父路由中传参给子路由传参：

子路由接收：