标签:vue Vue3 js import router id 路由
随着Vue版本的升级,Vue 2.x
项目和Vue 3.x
项目在使用vue-router上有些区别,本文就简单介绍下vue-router
在Vue3
中的配置和使用。
一、目录结构
demo/
package.json
vite.config.js
index.html
public/
src/
api/
assets/
common/
components/
store/
views/
home.vue
list.vue
router/
index.js
App.vue
main.js
二、版本依赖
vite
: ^2.0.0
vue
: ^3.2.8
vue-router
: ^4.0.1
三、配置路由
- 3-1.配置
src/router/index.js
路由文件
// src/router/index.js
import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
import { defineAsyncComponent } from 'vue'
const router = createRouter({
// history: createWebHashHistory(), // hash 模式
history: createWebHistory(), // history 模式
routes: [
{
path: '/',
name: 'home',
component: defineAsyncComponent(() => import(`../views/home.vue`)),
meta: {
title: '首页',
},
},
{
path: '/list',
name: 'list',
component: defineAsyncComponent(() => import(`../views/list.vue`)),
meta: {
title: '列表页',
},
},
{
path: '/*',
redirect: '/',
},
]
})
// 全局路由守卫
router.beforeEach((to, from, next)=>{
// console.log(to, from)
if (to.meta.title) {
document.title = `${to.meta.title}`;
}
next()
})
router.afterEach((to, from)=>{
// console.log(to, from)
console.log('afterEach')
})
export default router
说明:
-
路由模式:
history
模式对应createWebHistory()
方法hash
模式对应createWebHashHistory()
方法
-
路由懒加载:在
vite+Vue3
项目中使用import()
会有报错,所以使用vue提供的一个方法defineAsyncComponent
,详见另一篇:vue3 + vite实现异步组件和路由懒加载 -
3-2.在
src/main.js
入口文件中注册使用路由
// src/main.js
import { createApp } from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
// ...
const app = createApp(App)
app.use(router).use(store);
app.mount('#app')
- 3-3.在
src/App.vue
文件中使用<router-view/>
// src/App.vue
<template>
<router-view/>
</template>
四、使用路由
- 4-1.在
Option API
中使用和Vue 2.x
中使用没有差别。如下:
<template>
<div></div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
// 路由跳转 && 设置参数
this.$router.push({
path: '/list',
query: {
id: 123,
},
})
// 获取参数
let { id } = this.$route.query
},
}
</script>
- 4-2.在
Composition API
中不能再直接访问this.$router
或this.$route
,所以要使用useRouter
和useRoute
函数。
<template>
<div></div>
</template>
<script>
import { ref } from 'vue'
import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import ajax from "./ajax";
export default {
setup () {
const router = useRouter()
const route = useRoute()
// 路由跳转 && 设置参数
router.push({
path: '/list',
query: {
id: 123,
},
})
// 获取参数
let { id } = route.query
// 局部路由守卫
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'是否要离开本页面?'
)
// 取消导航并停留在同一页面上
if (!answer) return false
})
const userData = ref()
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户,例如仅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await ajax(to.params.id)
}
})
},
}
</script>
《Vue3学习与实战》系列
欢迎访问:天问博客
标签:vue,Vue3,js,import,router,id,路由 来源: https://blog.csdn.net/tiven_/article/details/121566190
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。