vue3使用vue-router的完整步驟記錄
前言
對(duì)于大多數(shù)單頁應(yīng)用程序而言,管理路由是一項(xiàng)必不可少的功能。隨著新版本的Vue Router處于Alpha階段,我們已經(jīng)可以開始查看下一個(gè)版本的Vue中它是如何工作的。
Vue3中的許多更改都會(huì)稍微改變我們?cè)L問插件和庫的方式,其中包括Vue Router。
一、第一步:安裝vue-router
npm install vue-router@4.0.0-beta.13
二、第二步:main.js
先來對(duì)比一下vue2和vue3中main.js的區(qū)別:(第一張為vue2,第二張為vue3)
可以明顯看到,我們?cè)趘ue2中常用到的Vue對(duì)象,在vue3中由于直接使用了createApp方法“消失”了,但實(shí)際上使用createApp方法創(chuàng)造出來的app就是一個(gè)Vue對(duì)象,在vue2中經(jīng)常使用到的Vue.use(),在vue3中可以換成app.use()正常使用;在vue3的mian.js文件中,使用vue-router直接用app.use()方法把router調(diào)用了就可以了。
注:import 路由文件導(dǎo)出的路由名 from "對(duì)應(yīng)路由文件相對(duì)路徑",項(xià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
四、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>
四、使用(比如跳轉(zhuǎn))
我們?cè)谛枰褂寐酚傻牡胤揭雞seRoute 和 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> <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>
總結(jié)
到此這篇關(guān)于vue3使用vue-router的文章就介紹到這了,更多相關(guān)vue3使用vue-router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10