本文共 1278 字，大约阅读时间需要 4 分钟。

#简介：

用 Vue.js + vue-router 可以快速创建，是非常简单的。使用 Vue.js ，我们已经可以通过组合Component来组成应用程序。 引入 vue-router 的过程：将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

---

##直接使用方法：

    
       
       
           // 注意顺序不能颠倒！！！                
   
        
    
            
     
      A
                 
     
      B
              
    
        
    
            
             
    
            
   

---

##模块化使用方法

部分目录结构如下：

├──node——modules├──src	├──assets	├──components   // 用来存放组件A.vue和B.vue	│	├──A.vue	│	└──B.vue	├──App.vue	├──main.js	├──router.config.js // router.config.js 用来存放路由信息	└──...

一、组件定义

A.vue

B.vue

二、路由信息

router.config.js

import A from './components/A.vue'import B from './components/B.vue'export default {    routes: [{        path: "/A",        component: A,    }, {        path: "/B",        component: B,    }, {        path: "*",        redirect: '/A'    }]}

三、调用router并挂载到vue上

main.js

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'import routes from './router.config.js'Vue.use(VueRouter);const router = new VueRouter(routes)new Vue({  el: '#app',  router,  render: h => h(App)})

四、router-link与router-view

App.vue

转载地址：http://gwnaf.baihongyu.com/