vue（二）vue-route

vue-route可实现单页面组件化跳转
例如在components文件夹下有test1.vue和helloworld.vue
如何将其组件化？
1.在route文件夹下的index.js里引入组件（注册）：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import aa from '@/components/test1' // import 模块名 from path

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//首页面
      name: 'HelloWorld',//随意
      component: HelloWorld
    },
    {
      path:'/asd',//跳转的页面路径
      name:'test1',//随意
      component: aa//组件名
    }
  ]
})

2.在APP.vue中引入

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/">hel</router-link>
    <router-link to="/asd">heal</router-link>
    <!-- <router-view name="aa"></router-view> -->
    <router-view/>
  </div>
</template>

效果如下：

这里通过route-link实现组件的跳转