vue-router3路由介绍

简介: vue-router3路由介绍

本文介绍了在Vue3项目中如何安装和使用vue-router4.x版本,包括介绍index.js中创建路由和main.js中引入并应用路由器的步骤。

摘要由CSDN通过智能技术生成

1、官方文档地址

2、在vue3的版本,只能安装并使用vue-router4.x

npm i vue-router@next -S

3、Vue-router按需导入方法

4、index.js写法

import { createRouter, createWebHashHistory } from "vue-router"
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
    ]
})
export default router

5、main.js写法

import { createApp } from 'vue'
import App from './App.vue'
import lingyiHeader from '@/components/lingyiHeader.vue'
import router from '@/router/index.js'
import "@/css/common.css"
Vue.component('lingyiHeader', lingyiHeader)
const app = createApp(App)
app.use(router)
app.mount('#app')
相关文章
|
7月前
|
缓存 JavaScript 前端开发
路由 Vue-routerII
路由 Vue-routerII
|
7月前
|
存储 前端开发 JavaScript
路由 Vue-routerI
路由 Vue-routerI
|
JavaScript
vue3的7种路由守卫使用大全
vue3的7种路由守卫使用大全
1462 0
|
1月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫(Guarded Routes),使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态,实现 `PrivateRoute` 组件进行路由保护,并在 `App.js` 中使用。文章还讨论了常见问题和易错点,提供了处理异步操作的示例,帮助开发者提升应用的安全性和用户体验。
56 1
|
5月前
|
JavaScript
vue-router【详解】路由懒加载
vue-router【详解】路由懒加载
41 0
|
移动开发 JavaScript 前端开发
Vue-Router路由(一)
Vue-Router路由(一)
55 0
|
7月前
|
存储 缓存 JavaScript
vue三种路由守卫详解
在 Vue 中,可以通过路由守卫来实现路由鉴权。**Vue 提供了三种路由守卫:全局前置守卫、全局解析守卫和组件内的守卫
|
7月前
|
前端开发 JavaScript Go
除了 VueRouter,还有哪些常用的路由库?
除了 VueRouter,还有哪些常用的路由库?
120 5
|
7月前
|
JavaScript 前端开发 网络架构
Vue Router:让你的应用路由起来!
Vue Router:让你的应用路由起来!
|
7月前
|
缓存 前端开发 JavaScript
vue-router路由使用实例详解
vue-router路由使用实例详解
119 0

热门文章

最新文章