vue3.0をダウンロード
Yarn global add @vue/cli@next
または
npm install -g @vue/cli@next
次のステップは、スキャフォールディングを構築することです
Vue3.0 は vite を使用します
Vite は、ネイティブ ES モジュール インポート メソッドによりコードを迅速に提供できる Web 開発およびビルド ツールです。
npm init vite-app プロジェクト名
cd vite-app
npm install
ここでプログラムを実行できますが、vue-router を使用する必要があるため、vue-router をダウンロードする必要があります。
npm install [email protected] --save
ここでは Gaode、最新の vue-router4.0 を使用しています。
ダウンロードが完了したら、プログラムを開始します。
npm 実行開発
次に、編集用の router.js ファイルを作成します。
import {
createRouter,createWebHistory } from 'vue-router'
import index from './components/index.vue'
import login from './components/login.vue'
const routerHistory = createWebHistory()
const routes = [
{
path:'/',
name:'index',
component:index
},
{
path:'/login',
name:'login',
component:login
}
]
const router = createRouter({
history: routerHistory,
routes
})
export default router
上記のコードでは、最初に vue-router をインポートし、次に vue2.0 と同じ方法でルートを作成し、
最後にルーターをエクスポートします。
次に main.js に移動します
。
自分で作成したrouter.jsを導入し
、アプリにルーターをマウントするには
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'
const app = createApp(App);
app.use(router);
app.mount('#app');
このようにしてルーティングを使用できます
<template>
<div @click="gotopath('/login')">点我去登录</div>
<div @click="gotopath('/')">点我去首页</div>
<router-view></router-view>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0
}
},
methods:{
gotopath(e){
this.$router.push(e)
}
}
}
</script>
使用する前に、対応するファイルを自分で作成することを忘れないでください。