路由组件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')`