vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
类别:编程学习 浏览量:1143
时间:2021-11-08 16:44:24 vue-router起步教程交流
vue3使用vue-router的完整步骤记录前言
对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。
Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router。
一、第一步:安装vue-router
npm install vue-router@4.0.0-beta.13
二、第二步:main.js
先来对比一下vue2和vue3中main.js的区别:(第一张为vue2,第二张为vue3)
可以明显看到,我们在vue2中常用到的Vue对象,在vue3中由于直接使用了createApp方法“消失”了,但实际上使用createApp方法创造出来的app就是一个Vue对象,在vue2中经常使用到的Vue.use(),在vue3中可以换成app.use()正常使用;在vue3的mian.js文件中,使用vue-router直接用app.use()方法把router调用了就可以了。
注:import 路由文件导出的路由名 from "对应路由文件相对路径",项目目录如下(vue2与vue3同):
三、路由文件
import { createRouter, createWebHashHistory } from "vue-router" const routes = [ { path: '/', component: () => import('@/pages') }, { path: '/test1', name: "test1", component: () => import('@/pages/test1') }, { path: '/test2', name: "test2", component: () => import('@/pages/test2') }, ] export const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router
四、app.vue
<template> <router-view></router-view> </template> <script> export default { name: 'App', components: { } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
四、使用(比如跳转)
我们在需要使用路由的地方引入useRoute 和 useRouter (相当于vue2中的 $route 和 $router)
<script> import { useRoute, useRouter } from 'vue-router' export default { setup () { const route = useRoute() const router = useRouter() return {} }, }
例:页面跳转
<template> <h1>我是test1</h1> <button @click="toTest2">toTest2</button> </template> <script> import { useRouter } from 'vue-router' export default { setup () { const router = useRouter() const toTest2= (() => { router.push("./test2") }) return { toTest2 } }, } </script> <style scoped> </style>
总结
到此这篇关于vue3使用vue-router的文章就介绍到这了,更多相关vue3使用vue-router内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
标签:vue3 vue-router
您可能感兴趣
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
- 沪上这16所高校 萌新 礼包开箱 哪一款让你心动(沪上这16所高校萌新)
- 她救了被绑架的他,而这一切竟是一场阴谋...(她救了被绑架的他)
- 冬季养殖这6种阴生植物,方便又好养,你家有么(冬季养殖这6种阴生植物)
热门推荐
- mysql慢日志查询作用(MySQL 慢查询日志的开启与配置)
- python3列表的使用教程(对Python3 pyc 文件的使用详解)
- python读取数据集的图片(浅析Python 读取图像文件的性能对比)
- docker安装nginx如何配置(docker部署nginx并且挂载文件夹和文件操作)
- MongoDB命令与SQL语法对比
- 安装SQL Server 2016出错提示:需要安装oracle JRE7 更新 51(64位)或更高版本问题的解(安装SQL Server 2016出错提示:需要安装oracle JRE7 更新 5164位或更高版本问题的解)
- C#中hashtable 的使用方法
- sqlserver 高级查询(利用 SQL Server 过滤索引提高查询语句的性能分析)
- Jquery中parent()和parents()
- idea连接不上docker(IDEA使用Docker插件远程部署项目到云服务器的方法步骤)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9