Vue3使用路由VueRouter4的簡單示例
更新時間：2021年07月15日 10:17:08 作者：Drk
在vue.js項目中使用vue-router，可以使用路由進(jìn)行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
路由
vue-router4保持了大部分API不變，我們只關(guān)注變化部分即可。
安裝
yarn add vue-router@4
引入
cdn
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script>
使用
router.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: () => import("./views/About.vue") }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount("#app");
App.vue
<template>
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</template>
<script>
export default {};
</script>
一個小提示
如果你的 App.vue 模板只有 <router-view></router-view> 時， 可以吧 <router-view> 直接放入 index.html 中。
例如：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
之后 main.js 內(nèi)移除 App.vue
main.js
import { createApp } from "vue";
// import App from "./App.vue";
import router from "./router";
// const app = createApp(App);
const app = createApp({});
app.use(router);
app.mount("#app");
完成！😀方便又好用
總結(jié)
到此這篇關(guān)于Vue3使用路由VueRouter4的文章就介紹到這了,更多相關(guān)Vue3使用路由VueRouter4內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vite中自制mock服務(wù)器(不使用第三方服務(wù))
本文主要介紹了Vite中自制mock服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue.js中extend選項和delimiters選項的比較
這篇文章主要介紹了Vue.js中extend選項和delimiters選項的比較的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了vue中的.sync修飾符用法及原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用v-model封裝el-pagination組件的全過程
通過封裝el-pagination組件開發(fā)自定義分頁組件的類似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動手搞一個，對v-model封裝el-pagination組件相關(guān)知識感興趣的朋友一起看看吧2021-07-07
vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)詳解
本篇文章給大家分享了一個用vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)的代碼過程，有興趣的朋友跟著參考學(xué)習(xí)下。2018-05-05
在 Vue 3 中,覆蓋組件樣式的方法與 Vue 2 相似,但由于 Vue 3 更多地依賴于 CSS 的模塊化,一些最佳實踐可能會有所不同,下面就跟隨小編一起來了解一下吧2024-04-04
vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目(搭建過程問題小結(jié))
這篇文章主要介紹了從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目,本項目已vite開始，所以按照vite官方的命令開始，對vite+vue3+ts項目搭建過程感興趣的朋友一起看看吧2022-05-05
這篇文章主要介紹了vue自定義marquee無縫滾動組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04