vue2.0-route

• 一、安装vue-router

  • 1.打开命令行工具，进入你的项目目录
  • 2.npm install vue-router --save-dev或cnpm install vue-router --save-dev(装过就不必重复再装）

• 二、配置路由

  import Vue from 'vue'   //引入Vue
  import Router from 'vue-router'  //引入vue-router
  import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
  Vue.use(Router)  //Vue全局使用Router
  export default new Router({
    routes: [              //配置路由，这里是个数组
      {                    //每一个链接都是一个对象
        path: '/',         //链接路径
        name: 'Hello',     //路由名称，
        component: Hello   //对应的组件模板
      }
    ]
  })
  

  • 无子路由

    • 引入配置页

      import Hi from '@/components/Hi'   
      

    • 配置路由对象

      {
      path:'/hi',
      name:'Hi',
      component:Hi
      }
      

  • 有子路由

    {
          path:'/hi',
          component:Hi,
          children:[
            {path:'/',component:Hi},
            {path:'hi1',component:Hi1},
            {path:'hi2',component:Hi2},
          ]
        }
    

  • 配置导航

      <router-link to="/">首页</router-link> |   
       //to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，
       //如果要导航到默认首页，只需要写成 to=”/” ，
      <router-link to="/hi">Hi页面</router-link> |            
      <router-link to="/hi/hi1">-Hi页面1</router-link> |     //hi1是hi 的子页面
      <router-link to="/hi/hi2">-Hi页面2</router-link>
    

• 三、传递参数

  • 1.用name传递参数

    • index

       {
      path:'/hi',
      name:'Hi',
      component:Hi
      }
      

    • app

      <p>{{$route.name}}</p>
      

  • 2.通过 标签中的to传参（需注意 ：to)

    <router-link :to="{name:Hi,params:{key:value}}">valueString</router-link>
    //这里面的name就是我们在路由配置文件中起的name值。params就是我们要传的参数
    -----------------------------------------------------------------------
    //接收{{$route.params.key}}
    
    

  • 3.利用url传递参数

    • index

      {
          path:'/Hi/:a/:b',  // Hi:页面名称  a和b为需要传递的参数
           component:Hi
      }
      

    • vue

      <template>
          <div>
              <h2>{{ msg }}</h2>
              <p>参数a:{{ $route.params.a}}</p>
              <p>参数b:{{ $route.params.b}}</p>
          </div>
      </template>
      <script>
      export default {
        name: 'hi11',
        data () {
          return {
            msg: 'Hi'
          }
        }
      }
      </script>
      

  • 4.参数也可以使用正则(若传入的值不符合正则 则传递失败)

    path:'/Hi/:a(\\d+)/:b'
    

(4)导航代码

<p>导航 ：
      <router-link to="/">首页</router-link> |    //to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，
      <router-link to="/hi">Hi页面</router-link> |            
      <router-link to="/hi/hi1">-Hi页面1</router-link> |     //hi1是hi 的子页面
      <router-link to="/hi/hi2">-Hi页面2</router-link>
</p>

• 四、子路由各页面基本写法

  • 1.vue模板

    • Hi （加入<router-view>标签，给子模板提供插入位置）

      <template>
        <div>
          <h1>{{ msg }}</h1>
          <router-view></router-view>
        </div>
      </template>
      <script>
      export default {
        name: 'hi',
        data () {
          return {
            msg: 'Hi'
          }
        }
      }
      </script>
      

    • Hi1 （加入<router-view>标签，给子模板提供插入位置）

      <template>
        <div>
          <h1>{{ msg }}</h1>
        </div>
      </template>
      <script>
      export default {
        name: 'hi',
        data () {
          return {
            msg: 'Hi1'
          }
        }
      }
      </script>
      

• 五、单页面多路由

  • 1.vue模板

    • app

      <router-view ></router-view>
       <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
       <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
      

    • index

      import Vue from 'vue'
      import Router from 'vue-router'
      import Hello from '@/components/Hello'
      import Hi1 from '@/components/Hi1'
      import Hi2 from '@/components/Hi2'
      Vue.use(Router)
      export default new Router({
        routes: [
          {
            path: '/',
            components: {
              default:Hello,
              left:Hi1,
              right:Hi2
            }
          },{
            path: '/Hi',
            components: {
              default:Hello,
              left:Hi2,
              right:Hi1
            }
          }
        ]
      })
      

    • Hi1

      <template>
          <div>
              <h2>{{ msg }}</h2> 
          </div>
      </template>
      <script>
      export default {
        name: 'hi1',
        data () {
          return {
            msg: 'Hi1'
          }
        }
      }
      </script>
      

    • Hi2
      
      

• 六、vue-router 的重定向

  • 1.redirect
    • 基本语法

      export default new Router({
       routes: [
          {
            path:'/Hi',
            component:Hi
          },{
            path:'/goback',
            redirect:'/'
          }
        ]
      })
      //按钮
      <router-link to="/goback">返回</router-link>
      

    • 传递参数

      {
         path:'/Hi',
          component:Hi
      },{
        path:'/goHi/:a(\\d+)/:b',
        redirect:'/Hi/:a(\\d+)/:b'  //跟定向路径的写法一样
      }
      //按钮		
      <router-link to="/Hi/a/b">toHi</router-link>
      

  • 2.alias
    • 基本语法

      {
          path: '/hi1',
          component: Hi1,
          alias:'/nickName'  //给Hi1页面取一个别名-nickName
       }
       //按钮
       <router-link to="/nickName">alias</router-link> | 
      

  • 不同点
    • redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
    • alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。

• 七、路由的过渡动画

  • ‘html’——router-view

    <transition name="fade">   //name属性关联class   必须设定
      <router-view ></router-view>
    </transition>
    

  • css

    • name=“fade” 对应四个类名 （若name = fade1 则类名fade1-enter…）只需设置fade-enter-active和fade-leave-active

      .fade-enter {
        opacity:0;
      }
      .fade-leave{
        opacity:1;
      }
      .fade-enter-active{
        transition:opacity .5s;
      }
      .fade-leave-active{
        opacity:0;
        transition:opacity .5s;
      }
      

  • 设置mode

    • in-out:新元素先进入过渡，完成之后当前元素过渡离开。
      out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

      <transition name="fade"  mode="out-in"> </transition>
      

• 八、index.js里的mode设置

  • histroy:当你使用 history 模式时，URL 就像正常的 url，localhost:8080
  • hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。http://localhost:8080/#/

    export default new Router({
       mode:"history",
    })
    

• 九、404页面

  • 在地址输入错误等情况下 提示用户进入404页面（需要新建一个Error.vue的页面）

    {
       path:'*',
       component:Error
    }
    

• 十、路由中的钩子

  • 在index.js中写钩子函数（只能进入此路由配置时写一个beforeEnter函数）

    {
       path:'/Hi/:a/:b',
          component:Hi,
          beforeEnter:(to,from,next)=>{
            console.log('我进入了Hi模板');
            console.log(to);
            console.log(from);
            next(false);    //不执行跳转
            next();    //不写next就不执行跳转
             next({path:'/'}); //跳转到指定页面
            }
    },
    

  • 写在模板中的函数（ beforeRouteEnter：在路由进入前的钩子函数。
    beforeRouteLeave：在路由离开前的钩子函数。）

    export default {
      name: 'params',
      data () {
        return {
          msg: 'params page'
        }
      },
     beforeRouteEnter:(to,from,next)=>{           //es6
        console.log("准备进入路由模板");
        next();
      },
       beforeRouteLeave:function(to, from, next){      
          console.log("准备离开路由模板");
        next();
       }
    }
    </script>
    

  • 用到的函数
    • next(false); //不执行跳转
    • next(); //不写next就继续执行跳转
    • next({path:’/’}); //跳转到指定页面

• 十一、编程式导航——务逻辑代码中需要跳转的写法

  • 按钮

     <button @click="goback">后退</button>
    

  • script

    export default {
      name: 'params',
      methods:{
          goback:function(){             //简化写法  goback(){}
                 this.$router.go(-1)  
                  //this.$router.go(-1) 和 this.$router.go(1)后退和前进  
                 this.$router.push('/xxx') 
                   //跳转到xxx页面
          }  
      }