Vue3 路由配置

路由配置

一、配置文件

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

如果创建的空文件出现报错，我们找到项目根目录的 tsconfig.json 文件，修改以下配置：

{
    "compilerOptions": {
        // ...
        "isolatedModules": false,
        // ...
    }
}

二、路由初始化

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

const routes = [
    {
        path: '/login',
        name: 'Login',
        component: LoginView
    }
];

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

export default router;

三、全局注册路由

在 main.ts 文件中，对路由进行配置：

import router from './router'

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

四、一级路由

const routes = [
    {
        path: '/login',
        name: 'Login',
        component: LoginView
    },
    {
        path: '/',
        name: 'Index',
        component: IndexView
    }
];

五、路由出口

在 App.vue 中设置一级路由的路由出口：

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

六、路由跳转

• router-link
• router API

<template>
    <div>
        <p>登录</p>
        <router-link to="/">首页</router-link>
        <button @click="login">登录</button>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
// 等同于 Vue2 中的 this.$router
const router = useRouter();
// 等同于 Vue2 中的 this.$route
const route = useRoute();

const login = () => {
    router.push('/');
}

</script>

七、路由传参