❝
vue-router是我们在vue项目中经常使用的路由工具，服务器托管网主要用于路由跳转、路由守卫等操作。
这里主要介绍一下vue-router在Vue3中的使用，版本是4.0X并且是Vite环境下
❞
安装
使用npm进行安装
npm install vue-router@4 --sava
基本使用
新建router
在src目录下新建一个router文件夹并在router目录下新建一个index.js
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// history 是history 模式 即路由是 域名/a 这里采用
// history 是hash 模式 即路由是 域名/#/a
// import.meta.env.BASE_URL 是模块的基本URL 未配置则为 /
// r服务器托管网outes 则为包含路由信息的数组构成
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: []
})
export default routermain.js 导入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')渲染内容
RouterView 是 Vue Router 提供的一个组件，用于根据当前路由状态动态渲染匹配到的组件内容，从而实现单页面应用中不同页面的切换。
My App
常用对象
在vue3中没有this，所以我们没办法像下面这样使用
// 路由器实例 用于在 Vue 组件中进行路由导航操作
this.$router
// 如跳转到不同的路由、在路由之间切换等
this.$router.push()
this.$router.replace()
this.$router.go()
// 当前路由信息对象 包含了当前页面的路由相关信息
this.$route
// 可使用以下获取路径、参数、查询参数、哈希等
this.$route.path
this.$route.params
this.$route.query但是，给我们提供了其他方法以供使用
在模版中我们依旧可以使用、router
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
// 路由器实例
const router = useRouter()
// 当前路由信息对象
const route = useRoute()
// 示例
router.push('/home')
const path = route.path
},
}
import { useRouter, useRoute } from 'vue-router'
// 路由器实例
const router = useRouter()
// 当前路由信息对象
const route = useRoute()
// 示例
router.push('/home')
const path = route.path
如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。
关注公众号了解更多
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
