vue-router的使用

本次博文主要讲一下vue的router部分，上次我们将router也放在入口js那写了，这明显是一个很不好的写法，这次我们重写一些这个入口js和附上一个正常点的router

import Vue from 'vue';
import App from '@/views/App';
import myrouter from '@/router';  //路由另外开文件写

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

上面引入的路由文件：

import Vue from 'vue';
import Router from 'vue-router';
//引入路由要用的相关组件
import login from '@/components/login';
import userList from '@/components/userList';
import vipUser from '@/components/vipUser';
import article from '@/components/article';
Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      component: login,
      beforeEnter:(to,from,next)=>{ //路由钩子
            //详细参数解释看代码底部的“全局路由钩子”
            next();
        }
    },
    {
      path: '/userList',
      component: userList,
      children: [
        {
          path: 'vip/:id(\d+)' //最前面不要加/不然不会识别,：id是通过url传参，在vipUser的组件里用$params.id可以获取,括号后面的是正则判断，需要满足正则才能在路由接收
          component: vipUser
        }
      ]
    },{
      path:'/goback',
      redirect:'/' //当路由到/goback的时候会重定向到/
    },{
　　　　path: '/article',
　　　　component: article,
　　　　alias: '/wenzhang'  //这里起别称，就是/article和/wenzhang是的路由效果是一致的
　　 }
  ]
})

//全局路由钩子
router.beforeEach((to, from, next) => {
  //to和from就是路由跳转的前后
  //这两个东西会有如下属性：name、fullPath、path、query
  //用于做各种逻辑判断，然后选择跳转到哪
  //用形如next('/userList/vip')的方式来决定跳转到哪
  //如果直接运行next()不传参数，就是放行到本来准备跳转到的页面
})

export default router;        

这里要解释一下children,这个children时控制这个子路由下的<router-view></router-view>

就是说第一层的路由是控制app下的<router-view></router-view>，第二层userList下的children路由时控制userList这个组件的<router-view></router-view>

---

跟router相关的标签有<router-view></router-view>和<router-link></router-link>

router-view上面都提过了是路由控制的目标

如果要一个组件里面嵌套多个router-view就需要如下的配置：

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:cmp1,
        aaa:cmp2,
        bbb:cmp3
      }
    }
  ]
})

而我们在根目录的模板是

<template>
    <div>
        <router-view></router-view>
        <router-view name="aaa"></router-view>
        <router-view name="bbb"></router-view>
    </div>
</template>

router-link实际上是一个a标签，使用方法如下

<router-link to="/">首页</router-link>
<router-link :to="{name:'hi1',params:{username:'zhangamie'}}">页面1</router-link>

router-link主要用法就是以上两种，to="/path"或者:to="{name:'aaa',parmas:{}}"

上面第二条对应的是下面这条路由

 {path:'/aaa',name:'aaa',component:aaa1},

---

transition 

切换路由效果<transition></transition>

<transition name="amie" mode="out-in">
  <router-view/>
</transition>

给transition随便一个name,mode选择用“out-in”先出后进

定义一下css

/*路由转换的那一刻*/
.amie-leave {
  opacity:1;
}
/*路由转换过程中*/
.amie-leave-active{
  opacity:0;
  transition:opacity 1s;
}
/*新路由进入的那一刻*/
.amie-enter { 
  opacity:0;
}
/*新路由进入的过程中*/
.amie-enter-active{
  opacity:1;
  transition:opacity 1s;
}

这样就可以做到路由切换的渐近渐出效果了，及时加入删除对应的class的原理很简单，就是监听元素的transionend事件而已

---

router-mode

我们发现vue路由上面都带#，明显就是考#来阻止浏览器跳转，但是很多时候我们不希望见到这个#，怎么办呢？

vue-router给我们提供了了一个模式选择

export default new Router({
  mode: 'history', //默认是'hash'
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      component: test
    }
  ]
})

当我们选择history模式时，我们就发现#不见了，当然我们可以直接在url上修改跳转路由，但是浏览器依旧还是会跳转

---

编程式导航

主要有2个方法go和push

//前进
this.$router.go(1)

//后退
this.$router.go(-1)

//跳转到某个路径
this.$router.push('/xxxx')