路由组件1

### 笔记

#### 一、安装：`yarn add vue-router`

#### 二、实例化

  * 从 vue-router 中引入 createRouter：`import { createRouter, createWebHistory } from "vue-router"`

  * 创建路由器实例：

    * `let router = createRouter(参数对象)`

```javascript

export const router = createRouter({

    history: createWebHistory(),

    routes: routes

})

```

#### 三、路由定义

  * 定义路由数组

```javascript

export const routes = [

    {

        path: '/',

        component: ()=>import('@/components/Home.vue')

    },

    {

        path: '/Profile',

        component: ()=>import('@/components/Profile.vue')

    }

]

```

#### 四、组件使用

  * 在模板中使用 RouterView 作为路由出口，用于渲染匹配路径对应的组件：`<RouterView></RouterView>`

  * 使用 RouterLink 进行导航：

    * `<RouterLink to="/">首页</RouterLink>`

    * `<RouterLink to="/profile">用户资料页</RouterLink>`

  * 在 script setup 中使用 useRouter 和 useRoute：

```javascript

import { useRouter, useRoute } from 'vue-router'

let Route = useRoute()

let Router = useRouter()

function btn() {

    if (Route.fullPath === '/') {

        Router.push('/Profile')

    } else {

        Router.push('/')

    }

    console.log(Route);

}

```

#### 五、应用挂载

  * 引入路由器并挂载到应用上：

    * `import router from './router'`

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