Vue3使用路由VueRouter4的簡單示例

更新時間：2021年07月15日 10:17:08 作者：Drk

在vue.js項目中使用vue-router，可以使用路由進行界面或路徑跳轉,下面這篇文章主要給大家介紹了關于Vue3使用路由VueRouter4的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

路由

vue-router4保持了大部分API不變，我們只關注變化部分即可。

安裝

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 內移除 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");

完成！😀方便又好用

總結

到此這篇關于Vue3使用路由VueRouter4的文章就介紹到這了,更多相關Vue3使用路由VueRouter4內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue完整版和runtime版的區(qū)別詳解
這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
vue?代碼壓縮優(yōu)化方式
這篇文章主要介紹了vue?代碼壓縮優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue組件之Tooltip的示例代碼
這篇文章主要介紹了Vue組件之Tooltip的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
詳解Vue文檔中幾個易忽視部分的剖析
針對Vue文檔中部分大家可能不會去研讀的內容，這篇文章主要介紹了詳解Vue文檔中幾個易忽視部分的剖析，非常具有實用價值，需要的朋友可以參考下
2018-03-03
postcss-pxtorem設置不轉換UI框架的CSS單位問題
這篇文章主要介紹了postcss-pxtorem設置不轉換UI框架的CSS單位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue element 表頭添加斜線的實現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實現(xiàn)代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-11-11
Element控件Tree實現(xiàn)數據樹形結構的示例代碼
我們在開發(fā)中肯定會遇到用樹形展示數據的需求,本文主要介紹了Element控件Tree實現(xiàn)數據樹形結構的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-08-08
vue之數據交互實例代碼
本篇文章主要介紹了vue之數據交互實例代碼，vue中也存在像ajax和jsonp的數據交互，實現(xiàn)向服務器獲取數據，有興趣的可以了解一下
2017-06-06
Vue使用el-input自動獲取焦點和二次獲取焦點問題及解決
這篇文章主要介紹了Vue使用el-input自動獲取焦點和二次獲取焦點問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
為什么Vue3.0使用Proxy實現(xiàn)數據監(jiān)聽(defineProperty表示不背這個鍋)
這篇文章主要介紹了為什么Vue3.0使用Proxy實現(xiàn)數據監(jiān)聽？defineProperty表示不背這個鍋，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10