vue3 创建路由「vue-router 4.x 的使用」
本篇主要讲解 vue-router 4.x 如何使用, vue-router 3.x 的使用可以移步此文 Vue 前端路由、vue-router 。
1. 什么是 vue-router
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目使用,能够轻松管理单页面应用程序中各组件的切换。
> vue-router 的版本
vue-router 目前有 3.x 和 4.x 的版本。其中:
- vue-router 3.x 只能结合 vue2 进行使用
- vue-router 4.x 只能结合 vue3 进行使用
vue-router 3.x 的官方文档:https://router.vuejs.org/zh/
vue-router 4.x 的官方文档:https://next.router.vuejs.org/
2. vue-router 4.x 的基本使用
> 安装
npm install vue-router@next -S
> 定义路由组件
定义将来要用 vue-router 来控制展示与切换的组件。
> 声明路由链接和占位符
<router-link>
表明路由链接,<router-view>
表明路由占位符
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
> 创建路由模块
在项目中创建 router.js 路由模块:
import { createRouter, createWebHashHistory } from "vue-router"
// createRouter 用于创建路由的实例对象
// createWebHashHistory 用于指定路由的工作模式 (hash 模式)// 导入需要切换的组件
import Home from './components/MyHome.vue'
import Movie from './components/MyMovie.vue'
import About from './components/MyAbout.vue'// 创建路由实例对象
const router = createRouter({// 指定路由工作模式history: createWebHashHistory(),// 定义 hash 与组件之间的对应关系routes:[{ path: '/home', component: Home },{ path: '/movie', component: Movie },{ path: '/about', component: About },]
})// 向外共享路由模块
export default router
> 挂载路由模块
在 main.js 文件中对路由模块进行导入并挂载:
import App from './App.vue'
import router from './router.js'const app = createApp(App)// 挂载路由模块
app.use(router)
app.mount('#app')
3. 其他参考
vue 两种路由模式 history 和 hash 介绍可参考此文 : vue中两种history和hash模式的使用
vue3 中两种模式的创建方法说明可参考此文 : createWebHistory 和 createWebHashHistory
vue3 创建路由「vue-router 4.x 的使用」相关推荐
- VueJS 官方路由之 Vue Router
文章目录 参考 描述 Vue Router 获取 npm yarn 依赖问题 使用 router-link router-view 配置路由插件 基本结构 子组件 导入需要进行路由匹配的组件 定义路由 ...
- 已解决vue-router4路由报“[Vue Router warn]: No match found for location with path“
vue-router4动态加载的模式下,当我们在当前页面刷新浏览器时,会出现一个警告 [Vue Router warn]: No match found for location with path ...
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
- Vue Router 命名路由、(嵌套)命名视图
命名路由 在Vue Router中 除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
- Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)
文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
- Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点 实现SPA的几个关键点 理解SPA单页面架构 什么是前端路由 锚链接与URL中的hash值 通过hashch ...
- Vue+Vue Router+Webpack打包网站基础页面
Vue+Vue Router+Webpack打包网站基础页面 1.目录结构 2.package.json所需依赖包 {"name": "vue_router_webpac ...
- Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
- Vue Router的router-link
详情可见 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
最新文章
- IOS10 APP安装后打开不提示是否允许使用数据
- OpenCV在图像中添加文字,画点,画直线
- gunicorn 几种 worker class 性能测试比较
- 扒一扒中断为什么不能调printf
- Spring MVC学习总结(10)——Spring MVC使用Cors跨域
- C语言中的undefined behavior系列(2)-- lifetime of object
- mybatis collection标签_MyBatis第二天(结果映射+动态sql+关联查询)
- linux ssh 双机互信
- 区块链 Solidity中uint转string 数字转字符串
- 基于springboot+vue的旅游信息(旅游线路)网站(前后端分离)
- 单片机c语言表达式,单片机C语言教程:运算符和表达式(位运算符)
- cacti 文件服务器,免费的服务器和网络监控工具-CactiEZ
- 智能注塑工艺与模流分析技术研讨会暨上海大学Moldex3D实训基地开幕式圆满结束
- thinkpadt410接口介绍_联想t410配置参数详解
- vue3项目简化Compositions API使用-省去频繁的import和各use函数调用
- java cxf encoded,java:JAXWS 2.0不支持Rpc / encoded wsdls
- python---Web前端HTML(超文本标记语言)
- c语言算术运算的作用,C语言算术运算符和算术表达式
- 最短路径——Dijkstra算法与Floyd算法
- 轨迹动画(屏幕线条环绕)