您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue3使用vue-router的步驟”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue3使用vue-router的步驟”吧!
對于大多數(shù)單頁應(yīng)用程序而言,管理路由是一項必不可少的功能。隨著新版本的Vue Router處于Alpha階段,我們已經(jīng)可以開始查看下一個版本的Vue中它是如何工作的。
Vue3中的許多更改都會稍微改變我們訪問插件和庫的方式,其中包括Vue Router。
npm install vue-router@4.0.0-beta.13
先來對比一下vue2和vue3中main.js的區(qū)別:(第一張為vue2,第二張為vue3)
可以明顯看到,我們在vue2中常用到的Vue對象,在vue3中由于直接使用了createApp方法“消失”了,但實(shí)際上使用createApp方法創(chuàng)造出來的app就是一個Vue對象,在vue2中經(jīng)常使用到的Vue.use(),在vue3中可以換成app.use()正常使用;在vue3的mian.js文件中,使用vue-router直接用app.use()方法把router調(diào)用了就可以了。
注:import 路由文件導(dǎo)出的路由名 from "對應(yīng)路由文件相對路徑",項目目錄如下(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
<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 (相當(dāng)于vue2中的 $route 和 $router)
<script> import { useRoute, useRouter } from 'vue-router' export default { setup () { const route = useRoute() const router = useRouter() return {} }, }
例:頁面跳轉(zhuǎn)
<template> <h2>我是test1</h2> <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的步驟”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。