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')
相关文章
|
6月前
|
缓存 JavaScript 前端开发
路由 Vue-routerII
路由 Vue-routerII
|
6月前
|
存储 前端开发 JavaScript
路由 Vue-routerI
路由 Vue-routerI
|
JavaScript 数据安全/隐私保护
【vue】路由守卫
【vue】路由守卫
75 0
|
JavaScript 前端开发
React-router 手动实现静态路由(staticRoute)
使用vue的同学都知道,vue的路由是静态的。什么叫做静态的呢?那就是可以通过一个配置文件来进行路由的配置,而我们的react的路由是动态的。为啥这么说呢?react路由具有先天的优势——jsx . 每一个页面都是组件,每一个组件可以随意的嵌套。所以react的路由是动态加载的。那么我们是否也可以向vue一样,使用一个静态文件来自动配置呢?答案是:肯定可以的。
React-router 手动实现静态路由(staticRoute)
|
16天前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫(Guarded Routes),使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态,实现 `PrivateRoute` 组件进行路由保护,并在 `App.js` 中使用。文章还讨论了常见问题和易错点,提供了处理异步操作的示例,帮助开发者提升应用的安全性和用户体验。
31 1
|
4月前
|
JavaScript
vue-router【详解】路由懒加载
vue-router【详解】路由懒加载
32 0
|
移动开发 JavaScript 前端开发
Vue-Router路由(一)
Vue-Router路由(一)
51 0
|
6月前
|
存储 缓存 JavaScript
vue三种路由守卫详解
在 Vue 中,可以通过路由守卫来实现路由鉴权。**Vue 提供了三种路由守卫:全局前置守卫、全局解析守卫和组件内的守卫
|
6月前
|
前端开发 JavaScript Go
除了 VueRouter,还有哪些常用的路由库?
除了 VueRouter,还有哪些常用的路由库?
98 5