Vue3都是导入一个创建实例的方法,它的底层是把new VueRouter()做了一个封装,可以把它当成一个封装的函数,它的内部还是进行new VueRouter的。
- 创建路由实例由 createRouter 实现
- 路由模式
- history 模式使用 createWebHistory()
基础代码解析
import { createRouter, createWebHistory } from 'vue-router'
// createRouter 创建路由实例,===> new VueRouter()
// 配置 history 模式
// 1. history模式:createWebHistory 地址栏不带 #,这个会用的更多一些,因为地址栏不带 #更美观一些
// 2. hash模式: createWebHashHistory 地址栏带 #
// console.log(import.meta.env.DEV)
// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址,默认是 ’/‘,代表着默认访问地址的前缀
// 而这个东西不应该写死,应该把它提成一个变量,import.meta.env.BASE_URL是vite中的环境变量,这个可以在vite.config.js中配置
// 如果将来你部署的域名路径是:http://xxx/my-path/user
// vite.config.ts 添加配置 base: my-path,路由这就会加上 my-path 前缀了
const router = createRouter({
// 当前的模式就是看当前导的方法,createWebHashHistory、createWebHistory(也就是Vue2中的history模式)
history: createWebHistory(import.meta.env.BASE_URL),
// routes还是一样的,原来怎么配,将来就怎么配
routes: []
})
export default router
import.meta.env.BASE_URL 是Vite 环境变量:https://cn.vitejs.dev/guide/env-and-mode.html
vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 配置基地址
base: '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
前三个单词都是固定的,里面会给你提供一些变量
vue.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 配置基地址
base: '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
如下图,router里面都含有相关的函数,route里面就含有参数对象
打印的route如下
![image-20240610215106099](https://img-blog.csdnimg.cn/img_convert/74b74d12d2ece1e22885cdd1a3953e62.png)
App.vue
<script setup>
// 包是从router里面导进来的
import { useRoute, useRouter } from 'vue-router';
// 大的路由对象也可以直接导入
// import router from '@/router'
// const goList = () => {
// // setup函数中的this指向undefined
// this.$router.push('/list')
// }
// 在 Vue3 CompositionAPI 中
// 1. 获取路由对象 router 使用方法:useRouter
// const router = useRouter()
// 2. 获取路由参数 route(Vue2中是this.$route),但在Vue3中,有个专门的语法 => useRoute
// const route = useRoute()
const router = useRouter()
const route = useRoute()
const goList = () => {
// 前面是大的路由器对象,后面是路由参数
router.push('/list')
console.log(router, route);
}
</script>
<template>
<div>
我是App
<!-- Vue3中router是直接向前兼容Vue2中router的 -->
<button @click="$router.push('/home')">跳首页</button>
<!-- 但是当它提成一个函数时,setup函数中的this指向undefined -->
<button @click="goList">跳列表页</button>
</div>
</template>
<style scoped></style>