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 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
php验证session无效的解决方法
2014/11/04 PHP
php生成zip文件类实例
2015/04/07 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python多线程http下载实现示例
2013/12/30 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python正则捕获操作示例
2017/08/19 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python求质数的3种方法
2018/09/28 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
delegate与普通函数的区别
2014/01/22 面试题
企业消防安全制度
2014/02/02 职场文书
银行优秀员工事迹
2014/02/06 职场文书
产品推广策划方案
2014/05/10 职场文书