1.通过代码跳转路由

route children方式可以配合router-view显示路由嵌套
其他的情况都是跳转一个新的界面

2.路由参数传递

index.vue

User.vue

3.路由懒加载

vender第三方
app.xx程序入口
一般情况只会打包成3个js文件
当项目太大，那么加载会缓慢

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/about',
      name: 'About',
      component: ()=> import('../views/About')
    },
    {
      path: '/user/:username',
      name: 'User',
      //懒加载动态加载
      //单独打包一个js文件
      component: ()=> import('../views/User')
    }
  ]
})

推荐这样做，统一管理

const About =  ()=> import('../views/About')
const User = ()=> import('../views/User')

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/user/:username',
      name: 'User',
      //懒加载动态加载
      //单独打包一个js文件
      component: User
    }
  ]
})

4.参数传递query方式

    关于界面push
    关于界面replace
     跳转至用户界面
     跳转至用户界面
     跳转至用户界面

router index.js

{
      path: '/user2',
      name: 'User2',
      component: ()=>import('../views/User2')
   }

全局导航守卫-组件内守卫

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/Index'

Vue.use(Router)

const About =  ()=> import('../views/About')
const User = ()=> import('../views/User')

const router =  new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
      beforeEnter:(to,from,next)=>{
        console.log('beforeEnter');
        next();
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/user/:username',
      name: 'User',
      //懒加载动态加载
      //单独打包一个js文件
      component: User,
      children: [
        {
          path: '/page1',
          name: 'page1',
          component: ()=> import('../views/Page1')
        },
        {
          path: '/page2',
          name: 'page2',
          component: ()=> import('../views/Page2')
        }
      ]
    },
    {
      path: '/user2',
      name: 'User2',
      component: ()=>import('../views/User2')
    }
  ]
})
//全局导航守卫
//进入界面之前
router.beforeEach(function(to,from,next){
  console.log('全局导航守卫');
  next();
})
router.afterEach((to,from)=>{
  console.log('后置');
})
export  default router

组件内守卫

keep-alive遇见vue-router

一个页面内吃的children路由，切换时会重新加载组件，浪费资源
router-view也是一个组件，如果直接被抱在keep-alive里面，所有路径匹配的视图都会被缓存