vue+vue-router的详细用法

1. vue安装vue-router

npm install  -save vue-router  
//package文件的dependencies节点写入依赖   dependencies部署是需要的 depenDencies 开发依赖，部署时不需要

2. vue 引用vue-router
src目录 下面创建router文件夹
在router文件夹下创建index.js文件

index.js

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

Vue.use(Router);

export default new Router({
    routes: [
		        {
		            path: '/',
		            name: 'login',
		            component: Login
		        },
		         {
		            path: '*',
		            name: '404',
		            component: E404
		        },
		        {
		          path: '/404',
		          name: '404',
		          component: E404
		        },
         ],
});   

在main.js 引入index.js

import router from './router/index';

let vue = new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

3. router的配置
嵌套路由，注意子路由不要以 “/” 开始

{
            path: '/component',
            name: 'component',
            meta: {
                requireAuth: true // 判断是否需要登录
            },
            component: Component,
            children: [
                {
                    path: 'view',
                    component: MyComponent
                },
                {
                    path: 'upload',
                    component: UploadComponent
                },
                {
                    path: 'setting',
                    component: SetComponent
                },
                {
                    path: 'update',
                    component: UpdateComponent
                }
            ]
        },

4. 路由的使用

路由跳转
 this.$router.push("")；
 监听路由变化
  watch: {
            $route(to , from){
              let path = to.path;
              if(path.lastIndexOf("/") > 0){
                path = path.substring(path.lastIndexOf("/")+1);
              }
              this.active = path;
            }
          }

其他可以参考api文档

5. $router 与 $route 的区别
$router是全局路由对象，可以用来做路由的跳转等
$route是当前路由的对象 可以用来获取当前路由的地址，参数等