vue3路由

一、下载路由插件

yarn add vue-router

二、路由配置

1、创建配置文件

src
 |--- router
 |      |--- index.ts

2、路由初始化

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import LoginPage from '../views/login/LoginPage.vue';

const routes = [
    {
        path: '/login',
        component: LoginPage
    }
]

const router = createRouter({
    routes,
    history: createWebHistory()    // history 模式
    // history: createWebHashHistory()   // hash 模式
});

export default router;

3、路由全局挂载

在 main.ts 中：

import router from './router'

const app = createApp(App);
app.use(router);
app.mount('#app');

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

三、路由出口

<template>
  	<router-view></router-view>
</template>

四、路由跳转

<template>
    <div>
        <h1>登录</h1>
        <router-link to="/home">首页</router-link>
        <button @click="toHome">跳转</button>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
// this.$router
const router = useRouter();

const toHome = () => {
    router.push('/home');
}
</script>

五、路由信息对象

<script setup lang="ts">
    import { useRoute } from 'vue-router';
    // this.$route
    const route = useRoute();
    console.log('route', route);
</script>