vue的路由管理包括路由取别名，页面懒加载，重定向，动态路由传参，嵌套路由，命名试图，404页面

1. router/index.js：实例化路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

export default router

2. router/router.js：路由配置管理。

import Home from './views/Home.vue'
export default [
    {
      path: '/',
      alias:'/home_page',  //为路由取别名，即访问"/home_page"和访问"/"和通过name："home",访问的效果是一样的
      name: 'home',   
      component: Home,    //普通写法
      beforEnter:(to,from,next)=>{   //该组件独有的守卫
      	if(from.name="login"){
	      	alert("这是从登陆页面跳转过来的")
	    }else{
	      	alert("这不是从登陆页面跳转过来的")
	    }
	    next()   //一定要在最后执行next(),否则不会跳转
      }
    },{
      path: '/about',
      name: 'about',      
      component: () => import('./views/About.vue')  //这样写，有懒加载的作用，即该页面显示时才会加载。
    },{
   	  path: '/argu/:name',    //动态路由传参：高级写法，动态加载路由，name是参数
   	  props:true,             //表示允许组件props:{}中接受name参数值，然后可以直接渲染在页面,{{name}}，或者$route.params.name获取路由参数
      component: () => import('./views/Argu.vue')  
    },{
   	  path: '/parent',    //嵌套路由
      component: () => import( './views/Argu.vue'),
      children:[
	      {
	      	path:"child1",  //注意只有父级需要'/'
	      	component: () => import('./views/child1.vue'),
	      },
	      {
	      	path:"child2",
	      	component: () => import('./views/child2.vue'),
	      },
      ]
    },{
		path: '/name_router',   //命名视图
		components: {
		    default:() => import('./views/about.vue') ,   //如果 没有name属性值，默认对应该路由
		    email:() => import('./views/parent.vue') ,    // 对应该路由
		    tel:() => import('./views/argu.vue')       // 对应该路由
		} 
	},{
		path: '/home',    //重定向路由
		redirect:"/",   //3种重定向的方法
//		redirect:{
//		   name:"home1"
//		},
//		redirect:to =>{    //如根据参数确定跳转到哪个页面
////		console.log(to)
////		return "/"
//			return {
//				name:"home1"
//		    }
//		}
	
	},{
   	  path: '/login',      	       
      component: () => import('./views/login.vue')  
    },{
		path:"*",   //404页面一定要写在最后，因为是从上到下匹配路由。
		component: () => import('./views/error404.vue'),
	}
  ]

3. 配置路由列表的5种方法：

a.为路由取别名：

    import Home from './views/Home.vue'  //如果有 name: 'home',表示是命名路由。
    {
        path: '/',
        alias:'/home_page',  //取别名，即访问"/home_page"和访问"/"和通过name："home",访问的效果是一样的
        name: 'home',        //命名路由
        component: Home    //普通加载页面模块
    },        
b.页面懒加载页面模块：即该页面显示时才会加载。不需要像import Home from './views/Home.vue'一样提前加载。
    {
        path: '/about',
        name: 'about',
        component: () => import('./views/About.vue')  
    },
c.动态路由加载传参：动态加载路由，name是参数，{{$route.params.name}}调用参数name的值。
    {
        path: '/argu/:name',
        props:true,             //表示允许组件props:{}中接受name参数值，并直接渲染在页面{{name}}
        name: 'argu',
        component: () => import( './views/argu.vue')  
    },
d.嵌套路由： `
  
`  。
    {
       path: '/parent',    //嵌套路由
       component: () => import('./views/Argu.vue'),
       children:[
           {
               path:"child1",   //注意只有父级需要'/'
               component: () => import( './views/child1.vue'),
           },
           {
               path:"child2",
               component: () => import('./views/child2.vue'),
           },
       ]
    }
e. 命名视图：同时存在多个路由跳转时`  ` 。
    {
        path: '/name_router',
        components: {
            default:() => import('./views/about.vue') ,   //如果 没有name属性值，默认对应该路由。
            email:() => import('./views/parent.vue') ,    // 对应该路由。
            tel:() => import('./views/argu.vue')       // 对应该路由。
        } 
    },
f. 重定向：重新定义跳转的路径，如本来是访问 '/home',重新绑定跳转到"/"。
    {
        path: '/home',
        redirect:"/",   //3种重定向的方法
//      redirect:{
//          name:"home1"
//      },
//      redirect:to =>{    //如根据参数确定跳转到哪个页面       
////         return "/"
//           return {
//               name:"home1"
//           }
//     }            
    }  

 4. js操作路由(即编程式的导航)进行页面跳转： 
 

    a. 返回/前进一页：返回：this.$router.go(-1)、this.$router.back()。前进：this.$router.go(1)。
    b. 跳转到其他页：
        this.$router.push("/parent")。
        this.$router.push({name:"parent",query:{name:"ace"})，即浏览历史纪录保存着,query是参数。
        this.$router.push({path:`/argu/${name}`})    ,es6带参数跳转，针对 path: '/argu/:name',该路由。
        this.$router.push({path:"/parent",params:{name:"ace"}) , 带参数跳转。
    c. 用其他页替换本页：this.$router.replace("/about")或this.$router.replace({name:"parent"})，即浏览历史纪录没有了。