http://router.vuejs.org/zh-cn/index.html 
做导航
如
<router-link :to="{path:‘/Chinder‘}">子页面</router-link>

显示页面相关信息
<router-view></router-view>

子路由
 <router-link :to="{path:‘/Chinder‘}">子页面</router-link>
 <router-link :to="{path:‘/Chinder/Chinder1‘}">子页面1</router-link>
<router-link :to="{path:‘/Chinder/Chinder2‘}">子页面2</router-link>
在Chinder（父组件中）
添加<router-view></router-view>
在路由.js中
导入想要跳转的页面，如下
import Chinders from ‘@/components/chinder‘
import Chinders1 from ‘@/components/chinder1‘
import Chinders2 from ‘@/components/chinder2‘
配置相关的路由
{
      path:‘/chinder‘,
      name:‘chinder‘,
      component:Chinders,
      //这上面它是父组件
      //这下面是子组件
      children:[
        {
          path:‘chinder1‘,
          component:Chinders1,
        },
        {
          path:‘chinder2‘,
          component:Chinders2,
        },
      ]
    }

vue-router如何参数传递
1：name:‘xxx‘
这边的配置要在
routes: [
    {
      path: ‘/‘,
      name: ‘Hello‘,
      component: Hello
    },
  在想要的.vue文件中调用这个数据，如下
如c.vue中，要对应上面配置的路由
<p>
    {{$route.name}}
  </p>
2：<router-link> 标签中的to传参
首先先在路由中把name的名字写好
children:[
        {
          path:‘chinder1‘,
          name:‘c1‘,
          component:Chinders1,
        },
        {
          path:‘chinder2‘,
          name:‘c2‘,
          component:Chinders2,
        },
      ]
接着到
这边的name必须和路由中的名字一样
<router-link :to="{path:‘/Chinder/Chinder1‘,name:‘c1‘,params:{username:‘abc‘,id:‘12345‘}}">子页面1</router-link>
最后把想显示的数据在对应的如c.vue中显示出来
如下
 <p>
    {{$route.name}}
  </p>这个可以不存在
 <p>
 这边的参数，必须在:to里面配置过的
    {{$route.params.username}}
    {{$route.params.id}}
  </p>

  单页面多路由区域操作
<router-view></router-view>
<router-view name="left" id="left"></router-view>
<router-view name="right" id="right"></router-view>
在路由中改变下如下
 {
      path: ‘/‘,
      name: ‘Hello‘,
      components:{
        default:Hello,
        left:L1,
        right:R1
      }
    },
L1,R1是对应的组件
当如果要修改对应的位置时.
 {
      path: ‘/abc‘,
      name: ‘Hello‘,
      components:{
        default:Hello,
        left:R1,
        right:L1
      }
    },

vue-router 利用url传递参数
<router-link :to="{path:‘/parnetC/198/jspang website is very good‘}">带有参数的</router-link>
路由.js
{
      path:‘/parnetC/:news(\\d+)/:titles‘,
      component:parnetC,
    },
()中的是正则规则

vue-router 的重定向-redirect
重定向
 <router-link to="/goHome">回首页</router-link>

 {
      path:‘/goHome‘,
      redirect:‘/‘
    }
    如果有参数的时候
   <router-link to="/parnetC/145/不错的呀">去其他地方</router-link>
{
      path:‘/goparnetC‘,
      redirect:‘/parnetC/:news(\\d+)/:titles‘
    },
alias别名的使用
:别名请不要用在path为’/’中，如下代码的别名是不起作用的。
<router-link to="/Cs1">alias</router-link>
{
          path:‘chinder1‘,
          name:‘c1‘,
          component:Chinders1,
          alias:‘/Cs1‘
        },
路由的过渡动画
<transition name="fade" mode="out-in">
      <router-view></router-view>
      <router-view name="left" id="left"></router-view>
      <router-view name="right" id="right"></router-view>
    </transition>
css
     .fade-enter{
        opacity:0
      }
      .fade-enter-active{
        transition: opacity 0.5s;
      }
      .fade-leave{
        opacity:1;
      }
      .fade-leave-active{
        opacity:0;
        transition:opacity 0.5s;
      }
      fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
      fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
      fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
      fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
      过渡模式mode：
      in-out:新元素先进入过渡，完成之后当前元素过渡离开。
      out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

mode的设置和404页面的处理
mode:
histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！
hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

404
 <router-link to="/123">404页面</router-link>
{
      path:‘*‘,
      component:Error404
    },

路由中的钩子
第一种：在路由index.js中写，但只能写一个
{
      path:‘/parnetC/:news(\\d+)/:titles‘,
      component:parnetC,
      beforeEnter:(to,from,next)=>{
        console.log(to)
        console.log(from)
        next()
      }

    },
    to:路由将要跳转的路径信息，信息是包含在对像里边的。
    from:路径跳转前的路径信息，也是一个对象的形式。
    next:路由的控制参数，常用的有next(true)和next(false)。
    next(true|false|{})这3种用法
第二种，在模板中写
beforeRouteEnter:(to,from,next)=>{
      console.log(‘进入中‘)
    next()
  },
  beforeRouteLeave:(to,from,next)=>{
      console.log(‘离开了‘)
    next()
  }

编程式导航
业务逻辑代码
hou(){
        alert(‘退后了‘);
        this.$router.go(-1)
    },
    qian(){
      alert(‘向前了‘);
      this.$router.go(1)
    },
    push(){

        this.$router.push(‘/‘);
    }
this.$router.push({path: ‘/login‘, query:{stage: stage}});

vue-router笔记