路由使用(一)

一.路由使用步骤

 1).下载 npm i vue-router -S

 2).在main.js中引入

 3).安装插件Vue.user(插件)

 4).创建路由对象 并配置路由

 5).将路由对象传递给vue实例，options中

 6).留坑

 

main.js

 

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import footer from './components/footer.vue'
Vue.use(VueRouter);

let router=new VueRouter({
routes:[
{path:'/footer',component:footer}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

app.vue

<template>
<div>
<!--留坑 非常重要-->
<router-view></router-view>
</div>
</template>