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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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
yii2中关于加密解密的那些事儿
2018/06/12 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
Javascript倒计时代码
2010/08/12 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
5款非常棒的Python工具
2018/01/05 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
运动会通讯稿500字
2014/02/20 职场文书
高级销售求职信
2014/02/21 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
测量工程专业求职信
2014/02/24 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
中秋客户感谢信
2015/01/22 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Python之matplotlib绘制折线图
2022/04/13 Python