vue-router

---

1. 安装或引用

1. 如果我们是在当前页面引入使用，只用在<script>中引入 vue 和 vue-router 的包即可，无需手动安装；

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2. 如果是在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

npm install vue-router   # 要有node.js环境，才能使用npm安装vue组件

         然后在模块中，我们需要先导入模块，再明确使用路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. 需要知道的一些语法

2.1 => 定义函数

//1.无形参
var f = () => 10;
// 等同于
var f = function () {
	 return 10 
};

//2.有形参
var sum = (a, b) => a + b;
// 等同于
var sum = function(a, b) {
  return a + b;
};

2.2 let ,var 与 const

1. const 声明一个只读的常量，一旦声明，常量的值就不能改变。

const a = 10;

2. var 在函数内声明的变量只能作为局部变量；即使在块中声明，仍然是全局变量；当变量在块外定义，在块内变量被重新声明时，变量值发生改变；

{ 
    var x = 2; 
}
// 这里可以使用 x 变量
/*-----------------------*/
var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

3. let 更为严格，在块中定义的变量，只能作为局部变量使用；当变量在块外定义，在块内被重新声明时，变量值只在块内发生变化，不影响块外的数据；

{ 
    let x = 2;
}
// 这里不能使用 x 变量
/*-----------------------*/
var x = 10;  		// 注意let不能重复声明
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

2.3 concat

concat() 方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

//语法
arrayObject.concat(arrayX,arrayX,......,arrayX)

3 单页面js嵌套路由配置

单页面是把网页拆分成一个个的模块进行开发，通过异步交互的方式，来实现页面的局部刷新及功能实现；其中路由的配置大致可以分为x步，分别是：

1. 嵌套配置局部页面的单路由（基于主页面）route；
2. 组装所有页面路由 routes；
3. 创建路由管理实例 router 并导入总路由配置 routes；
4. 将 router 注入到 vue 根实例中，即可使用路由功能。

这里通过代码演示，学习项目中路由的配置：

3.1 局部单路由（route）配置

当某一局部页面功能完善后，需要进行路由配置，使我们能在浏览器段访问到该界面；

//导入主页组件和局部页面组件
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue'; //@指向src目录，可以在webpack.base.conf.js中配置

//配置并导出子页面嵌套路由
//主页面vue中需要在合适的位置引入路由路径。。这个后面再谈（伏笔）
export default [{
    path: '/',  //主页面路径
    component: Home,  //主页面组件
    name: 'CMS',//菜单名称
    hidden: false,//显示菜单名称
    //子菜单
    children: [
        //我们需要在"主页面"组件中，添加"页面列表"组件，来实现当前路由所配置的局部页面功能
        /**
         * path: 标识在主页面组件访问路径的基础上，来访问子页面组件的路径
         * component: 子页面组件，在前面已经导入
         */
        {path: '/cms/page/list', name: '页面列表', component: page_list, hidden: false}
    ]
}
]

3.2 路由组合（routes）

当一个一个的局部页面功能都完善了，并且配置了相应的路由，我们就需要将所有的路由汇总，统一交由 router 来管理；

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);
// 定义路由配置
let routes = []
let concat = (router) => {
    routes = routes.concat(router)
}
// 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)//加入home模块的路由
concat(CmsRouter)//加入cms模块的路由
export default routes; //导入routes路由组合

3.3 路由管理（router）及 将router注入到vue根实例

这两部我们一般都 main.js 中配置完成；

import Vue from 'vue'
import VueRouter from 'vue-router'  //在main.js文件中引入路由插件
import routes from './base/router'  //在main.js中引入路由组合

Vue.use(VueRouter)   			    //使用路由插件

const router = new VueRouter({      //实例化VueRouter，并导入配置参数进行管理
  routes:routes                     //后面的routes即上面路由组合的总路由配置
})

new Vue({							//在vue根实例中挂在（注入）router
  el: '#app',
  router,   //A.挂载路由
  store,
  render: c => c(App)
})