一、使用vue@cli创建一个项目
vue init webpack [项目名] cli2
vue create [项目名] cli3
二、找到component目录创建两个组件
Home组件
<template>
<div>
<h2>我是Home首页</h2>
<p>Home内容</p>
</div>
</template>
<script>
export default {
name: "home"
}
</script>
<style scoped>
</style>
About组件
<template>
<div>
<h2>我是About首页</h2>
<p>About内容</p>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style>
三、在目录找到router/index.html
//配置相关路由信息
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
//1、Vue.use(插件) 来使用这个插件
Vue.use(Router)
//2、创建路由对象
const router = new Router({
//3、配置路由和组件的应用关系 一个数组
routes: routes
})
//3.1 配置信息数组抽离
const routes = [
//一个组件对应一个对象
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
//4、将router传入Vue实例中 导出到main.js
export default router
四、在App.vue配置两组件
<template>
<div id="app">
<router-link to="/home">Home首页</router-link>
<router-link to="/about">About首页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
五、main.js注册组件(实现单页面富应用)
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//router: router
router,
render: h => h(App)
})
启动项目:npm run dev