Vue------Vue-Routerのインストールと使用
6579 ワード
インストール
新しいrouterフォルダを作成し、フォルダにindex.jsファイルを追加し、vue-routerを導入します.
main.jsで、私たちが書いたrouterのindex.jsファイルを導入します.
最後にapp.vueに追加
npm install vue-router
新しいrouterフォルダを作成し、フォルダにindex.jsファイルを追加し、vue-routerを導入します.
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: () => import('../components/HelloWorld.vue'),
meta: { title: ' ' }
}
]
});
main.jsで、私たちが書いたrouterのindex.jsファイルを導入します.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
最後にapp.vueに追加
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>