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使用路由VueRouter4的简单示例)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
- 兄弟萌,今年的七夕又取消了 思考 思考(今年的七夕又取消了)
- 七夕取消是什么梗(七夕取消是什么梗)
- 这竟然是捏出来的 20种橡皮泥玩法让你轻松hold住魔娃(这竟然是捏出来的)
- 自制橡皮泥(自制橡皮泥)
- 还在卖 禁药西布曲明网上论斤卖(还在卖禁药西布曲明网上论斤卖)
热门推荐
- SqlServer中如何解决session阻塞问题(SqlServer中如何解决session阻塞问题)
- python 组合数据类型(详解Python3 对象组合zip和回退方式*zip)
- python找到连续不重复最长英文串(Python实现简单查找最长子串功能示例)
- nginx怎么支持http转https(Nginx域名转发https访问的实现)
- HttpWebRequest的使用
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- js如何生成随机数
- 网页打开serviceunavailable(503 service unavailable错误解决方案讲解)
- jquery使用data缓存数据
- CSS中 z-index 的用法
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9