vue3使用vue-router的完整步骤记录


Posted in Vue.js onJune 20, 2021

前言

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的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)

vue3使用vue-router的完整步骤记录vue3使用vue-router的完整步骤记录

可以明显看到,我们在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同):

vue3使用vue-router的完整步骤记录

三、路由文件

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue+iview实现分页及查询功能
Nov 17 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Vue过滤器(filter)实现及应用场景详解
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
You might like
信用卡效验程序
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
Python六大开源框架对比
2015/10/19 Python
python如何获取服务器硬件信息
2017/05/11 Python
python队列Queue的详解
2019/05/10 Python
Python文件操作函数用法实例详解
2019/12/24 Python
windows支持哪个版本的python
2020/07/03 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
保密普查工作实施方案
2014/02/25 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
工作失职检讨书范文
2015/05/05 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript