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.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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_multisort多维数组排序的使用说明
2011/01/04 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
php中yii框架实例用法
2020/12/22 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
python发腾讯微博代码分享
2014/01/10 Python
Python yield 使用浅析
2015/05/28 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python如何控制进程或者线程的个数
2020/10/16 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
解决python3输入的坑——input()
2020/12/05 Python
Python jieba库分词模式实例用法
2021/01/13 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
勤俭节约倡议书
2014/04/14 职场文书
2014年绿化工作总结
2014/12/09 职场文书
导游词之安徽九华山
2019/09/18 职场文书
python中取整数的几种方法
2021/11/07 Python