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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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 array_intersect()函数使用代码
2009/01/14 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
简明 Python 基础学习教程
2007/02/08 Python
python在windows下实现备份程序实例
2014/07/04 Python
python字典的常用操作方法小结
2016/05/16 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python斐波那契数列的计算方法
2018/09/27 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Python修改DBF文件指定列
2020/12/19 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
家长评语和期望
2014/02/10 职场文书
党员承诺书范文
2014/05/19 职场文书
大学生村官考核材料
2014/05/23 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
总经理致辞
2015/07/29 职场文书
学习党章心得体会2016
2016/01/15 职场文书
java基础——多线程
2021/07/03 Java/Android
深入理解Pytorch微调torchvision模型
2021/11/11 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL