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实现组件的跳转