70 - vue3案例 - 02 - router4路由代码解析

一. 路由初始化

1. 路由文件介绍

        router / index.js

import {
  createRouter,
  createWebHistory,
  createWebHashHistory
} from 'vue-router'

// createRouter 创建路由实例
// 1. history模式: createWebHistory      地址栏不带 #
// 2. hash模式:    createWebHashHistory  地址栏带 #

// import.meta.env.BASE_URL: 路由前缀
//  vite中的环境变量 import.meta.env.BASE_URL 就是 vite.config.js中的 base 配置项

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

2. 配置路由前缀(可选)

        vite.config.js

//export default defineConfig({
 // plugins: [vue()],
  base: '/',
 // resolve: {
 //   alias: {
   //   '@': fileURLToPath(new URL('./src', import.meta.url))
  //  }
 // }
//})

3. 页面中跳转路由

        App.vue

<script setup>
// 在Vue3 CompositionsAPI 中
// 1. 获取路由对象 router useRouter
//    const router = useRouter()
// 2. 获取路由参数 route useRoute
//    const route = useRoute()
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const goList = () => {
  router.push('/list')
  console.log(router, route)
}
</script>

<template>
  <div>
    我是App
    <button @click="$router.push('/home')">跳首页</button>
    <button @click="goList">跳列表页</button>
  </div>
</template>

<style scoped></style>

4. 总结