Vue路由

组件

全局组件
    import Index from './components/index.vue';
    
 Vue.component("Index", Index);
 
局部组件

在template标签中

<Index/>

在app.vue中的script标签中

import Index from './components/index.vue';
    
export default {
  name: 'App',
  components:{
    Index
  }
}

router路由

1. 
    // 下载
    cnpm install --save-dev vue-router

2.

    // 引入
    import VueRouter from "vue-router"
    
    // 创建一个主路由并引入
    import Index from '../components/index.vue';

3. 
    // 挂载路由
    Vue.use(VueRouter);

4. 
    // 实例化
    
let router = new VueRouter({
    routes: [{
        path: '/index',
        component: Index
        }]
    })

5. 在实例化vue中添加router

new Vue({
    el: '#app',
// 添加router:router 可省略
    router,
    components: { App },
    template: '<App/>'
})

6.在app.vue的template中

    <router-view></router-view>

组件的概念

1.组件是vue最强大的功能

2.可以扩展html元素，封装可重用的代码

3.组件系统让我们可复用的小组件来构建大型应用