vue路由使用详解 #

基础的路由配置 #

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes';
Vue.use(Router)

export default new Router({
  mode: 'history', // 不使用#方式
  base: process.env.BASE_URL,
  routes
});

// routes.js文件是专门处理路由的 配置影射关系
export default  [
    {
        path:'/',
        redirect: {name:'home'} // 默认访问根路径时 可以重定向到home路由
    },
    {
        name:'home',
        path:'/home', //  实现了路由的懒加载
        component:()=>import('../views/Home.vue')
    },
    {
        path:'/profile',
        name:'profile',
        component:()=>import('../views/Profile.vue')
    },
    {
        path:'/user',
        name:'user',
        component:()=>import('../views/User.vue')
    },
    {
        path:'/login',
        name:'login',
        component:()=>import('../views/Login.vue')
    },
    {
        path:'*',
        component:()=>import('../views/404.vue')
    }
]

路由的导航应用 #

引入bootstrap,进行安装

yarn add bootstrap@3
import 'bootstrap/dist/css/bootstrap.css'

<template>
<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                管理系统
                </a>
            </div>
            <ul class="navbar-nav nav">
                    <li>
                        <router-link :to="{name:'home'}">首页</router-link>
                    </li>
                    <li>
                        <router-link :to="{name:'profile'}">个人中心</router-link>
                    </li>
                    <li>
                        <router-link :to="{path:'/user'}">用户管理</router-link>
                    </li>
                    <li>
                        <router-link :to="{name:'login'}">登录</router-link>
                    </li>
            </ul>
        </div>
    </nav>
</div>
</template>

配置命名视图 (一个路径匹配多个路由) #

在项目中一般情况是不使用命名视图的

{
    name:'home',
    path:'/home', //  实现了路由的懒加载
    components:{ // 当前路径 匹配对个router-view
        default:()=>import('../views/Home.vue'),
        name:()=>import('../components/Name.vue'),
        version:()=>import('../components/Version.vue')
    }
}

二级路由配置 #

父路径跳转必须使用路径跳转使用nam, 不显示默认孩子

{
        path:'/user',
        name:'user',
        component:()=>import('../views/User.vue'),
        children:[ //  子路由配置
            {
                path:'', // 如果渲染默认路由 必须使用path跳转
                redirect:{name:'userAdd'}
            },
            {
                name:'userAdd',
                path:'userAdd',
                component:()=>import('../views/UserAdd')
            },
            {
                name:'userList',
                path:'userList',
                component:()=>import('../views/UserList')
            }
        ]
},

二级路由跳转 #

// user.vue
<template>
<div class="row">
    <div class="col-md-3">
        <nav class="nav nav-stacked">
            <li>
                <router-link :to="{name:'userAdd'}">用户添加</router-link>
            </li>
            <li>
                <router-link :to="{name:'userList'}">用户列表</router-link>
            </li>
        </nav>
    </div>
    <div class="col-md-9">
        <router-view></router-view>
    </div>
</div>
</template>

编程式导航 #

<template>
    <div>
        <button class="btn btn-primary" @click="login">登录</button>
    </div>
</template>

<script>
export default {
    methods: {
        login(){
            this.$router.push({name:'login'})
        }
    },
}
</script>

组件内的钩子 #

 beforeRouteLeave (to, from, next) {
        if(this.username){
            let confirm = window.confirm('确认离开吗');
            if(confirm) return next();
        }else{
            next();
        }
 }
beforeRouteEnter(to,from,next){
       // 在进入路由之前可以对数据校验 ajax获取
       let user = JSON.parse(localStorage.getItem('user')) || [];
       if(user.length){
           next();
       }else{
           next({name:'userAdd'})
       }
},

带参数跳转 #

{
    name:'userDetail',
    path:'userDetail',
    component:()=>import('../views/UserDetail')
},
{
    name:'detail',
    path:'userDetail/:name', // 路径参数 必须通过name跳转
    component:()=>import('../views/UserDetail')
}
// 不同方式的传递参数
<td><router-link :to="{name:'userDetail',query:{id:u.id}}">{{u.id}}</router-link></td>
<td><router-link :to="{name:'detail',params:{name:u.username}}"> {{u.username}}</router-link></td>

// 取值方式
 查询字符串 {{this.$route.query && this.$route.query.id}} <br>
 查询参数 {{this.$route.params && this.$route.params.name}} <br>

权限校验 #

router.beforeEach((to,from,next)=>{
  let needLogin = to.matched && to.matched.some(({meta})=>{
   return meta && meta.needLogin
  });
  let isLogin = localStorage.getItem('login')
  if(needLogin){
    if(isLogin){
      next();
    }else{
      next({name:'login'});
    }
  }else{
    // 如果不需要登录 并且是登录页面
    if(!(to.name == 'login' && isLogin)){
      next();
    }
  }
});

路由更新变化 #

// watch:{
//    $route(){
          alert('参数变化')
      }
// }
beforeRouteUpdate(){ // 如果组件被复用 唯一的方式 就是监听路由的更新方法
    console.log('路由更新了')
}

钩子执行属性 #

• 导航被触发。
• 在失活的组件里调用离开守卫。
• 调用全局的 beforeEach 守卫。
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
• 在路由配置里调用 beforeEnter。
• 解析异步路由组件。
• 在被激活的组件里调用 beforeRouteEnter。
• 调用全局的 beforeResolve 守卫 (2.5+)。
• 导航被确认。
• 调用全局的 afterEach 钩子。
• 触发 DOM 更新。
• 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

导航激活样式 #

.router-link-active{
  color:red!important
}
.nav-stacked .router-link-active{
  color:blue !important
}

路由动画 #

<div class="container">
      <transition-group name="fade" >
        <router-view key="1"></router-view>
        <router-view key="2" name="name"></router-view>
        <router-view key="3" name="version"></router-view>
      </transition-group>
</div>
.fade-enter{ opacity:0}
.fade-enter-active{ transition:all 0.2s linear;}
.fade-enter-to{opacity:1}
.fade-leave{opacity:1}
.fade-leave-active{transition:all .2s linear}
.fade-leave-to{opacity:0}

https://github.com/wakeupmypig/vue-router-apply