Vue 3 사용 루트 VueRouter 4 의 간단 한 예시
2839 단어 vue3경로vuerouter4
vue-router 4 는 대부분의 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;
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount("#app");
<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 템 플 릿 이
예 를 들 면:
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
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");
총결산
Vue 3 사용 경로 Vue Router 4 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 3 사용 경로 Vue Router 4 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
내 새 책,오픈 소스 관리 시스템, vue-bag-adminvue-bag-admin，use Vue3+Vite2.6+TypeScript+ant-design-vue，Provide the basic framework, quickly build enterprise-level bac...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
