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')
相关文章
|
2月前
|
缓存 JavaScript 前端开发
路由 Vue-routerII
路由 Vue-routerII
|
2月前
|
存储 前端开发 JavaScript
路由 Vue-routerI
路由 Vue-routerI
|
10月前
|
JavaScript 数据安全/隐私保护
【vue】路由守卫
【vue】路由守卫
52 0
|
11月前
|
JavaScript
vue3的7种路由守卫使用大全
vue3的7种路由守卫使用大全
1324 0
|
JavaScript 前端开发
React-router 手动实现静态路由(staticRoute)
使用vue的同学都知道,vue的路由是静态的。什么叫做静态的呢?那就是可以通过一个配置文件来进行路由的配置,而我们的react的路由是动态的。为啥这么说呢?react路由具有先天的优势——jsx . 每一个页面都是组件,每一个组件可以随意的嵌套。所以react的路由是动态加载的。那么我们是否也可以向vue一样,使用一个静态文件来自动配置呢?答案是:肯定可以的。
React-router 手动实现静态路由(staticRoute)
|
2月前
|
存储 缓存 JavaScript
vue三种路由守卫详解
在 Vue 中,可以通过路由守卫来实现路由鉴权。**Vue 提供了三种路由守卫:全局前置守卫、全局解析守卫和组件内的守卫
|
2月前
|
前端开发 JavaScript Go
除了 VueRouter,还有哪些常用的路由库?
除了 VueRouter,还有哪些常用的路由库?
43 5
|
10月前
|
移动开发 JavaScript 前端开发
Vue-Router路由(一)
Vue-Router路由(一)
36 0
|
2月前
|
JavaScript 前端开发 网络架构
Vue Router:让你的应用路由起来!
Vue Router:让你的应用路由起来!
|
2月前
|
缓存 前端开发 JavaScript
vue-router路由使用实例详解
vue-router路由使用实例详解
44 0

热门文章

最新文章