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
深入了解Vue3模板编译原理
Nov 19 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue实现登陆页面开发实践
May 30 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python yield与实现方法代码分析
2018/02/06 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python的pip安装以及使用教程
2018/09/18 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
vue常用指令代码实例总结
2020/03/16 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
行政专员的岗位职责
2014/03/10 职场文书
中学生演讲稿
2014/04/26 职场文书
爱心倡议书范文
2014/05/12 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
抢劫罪辩护词
2015/05/21 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2016七夕情人节广告语
2016/01/28 职场文书