Shulou(Shulou.com)05/31 Report--

This article mainly explains the "vue3 method of using vue-router". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian slowly and deeply to study and learn the "vue3 method of using vue-router" together!

preface

Managing routing is an essential feature for most single-page applications. With the new version of Vue Router in Alpha, we can already start seeing how it works in the next version of Vue.

Many of the changes in Vue3 will slightly change the way we access plugins and libraries, including Vue Router.

Step 1: Install vue-routerpm install vue-router@4.0.0-beta.13 Step 2: main.js

Let's compare the difference between main.js in vue2 and vue3:(the first is vue2, the second is vue3)

可以明显看到，我们在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同）：

三、路由文件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 export default { name: 'App', components: { }}#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;}四、使用（比如跳转）

我们在需要使用路由的地方引入useRoute 和 useRouter （相当于vue2中的 $route 和 $router）

import { useRoute, useRouter } from 'vue-router'export default { setup () { const route = useRoute() const router = useRouter() return {} },}

例：页面跳转

我是test1 toTest2import { useRouter } from 'vue-router'export default { setup () { const router = useRouter() const toTest2= (() => { router.push("./test2") }) return { toTest2 } },}感谢各位的阅读，以上就是"vue3使用vue-router的方法"的内容了，经过本文的学习后，相信大家对vue3使用vue-router的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.