20 vue-router的使用

vue-router的使用方式：

1:下载 npm i vue-router -S
2:在main.js（或router/index.js）中引入 import VueRouter from 'vue-router';
3:安装插件Vue.use(VueRouter);
4:创建路由对象并配置路由规则

    let router = new VueRouter({routes:[{path:'/home',component:Home}]});

     

      或

         

        const routes = [

          {

            path: '/',

            component: login

          },

5:将其路由对象传递给Vue的实例，main.js加入 options中加入 router:router

import router from './router'

new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
})

6:在app.vue中留坑 <router-view></router-view>

<template>
    <div id="app" class="fillcontain">
            <router-view></router-view>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less">
    @import './style/common';
</style>