vue-router前端vue的路由组件

2018-06-14 fishedee 前端

1 概述

继续vue全家桶的第二部，vue-router

2 基础

import 'babel-polyfill'
import './index.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import Foo from './foo'
import Bar from './bar'
import App from './app'

Vue.use(VueRouter);

const routes = [
  { 
    path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes:routes
})

new Vue({
    el: '#root',
    router:router,
    render:(createElement)=>createElement(App)
})

将路由以js的object形式表达出来，注意，一旦Vue.use(VueRouter)以后，vue-router的一些组件就会注册到全局的地方去，例如是router-link,router-view。

<template>
    <div>
        <h1>Hello App!</h1>
        <p> 
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

然后以router-view来展示匹配到的路由页面，注意用router-link代替原来的a标签

可以看出，总体上像是react-router 3的写法。

代码在这里

3 匹配

const routes = [
  { 
    path: '/login', 
    component: Login 
  },
  { 
    path: '/user/:userId', 
    component: User 
  },
  {
    path:'/',
    component:Home,
    children:[
        {
            path:"",
            component:HomeNothing
        },
        {
            path:"/friend",
            component:Friend
        },
        {
            path:"/timeline",
            component:Timeline
        },
      {
        path:"/time",
        redirect:'/timeline'
      }
    ]
  },
  {
    path:"*",
    component:NotFound
  }
]

该路由设置展示了多种的路由匹配形式

  • 完全匹配，/login
  • 参数匹配，/user/:userId
  • 嵌套匹配，/+children的形式，注意HomeNothing的空号匹配
  • 跳转与别名，redirect或alias。
  • 无法匹配，*形式

当单个路径匹配多个路由时，按照路由的配置最先出现的最先匹配。

代码在这里

4 跳转

<router-link v-bind:to="link">Go to {{link}}</router-link>

router-link标签的跳转方式

this.$router.push('/123')
this.$router.replace('/123')
this.$router.go(-1)

js的跳转方式

代码在这里

5 守卫

const routes = [
  { path: '/foo', component: Foo ,meta: { requiresAuth: true }},
  { path: '/bar', component: Bar},
  { path: '/login', component: Login},
]

const router = new VueRouter({
  routes:routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => !!record.meta.requiresAuth)) {
    next({
        path: '/login',
        query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
})

可以用全局的路由钩子，使得在跳转前加入登录检查等守卫工作。在react-router中，就只能自己用装饰器来实现了。

代码在这里

6 动画

<transition name="slide">
    <router-view></router-view>
</transition>
<style>
.slide-enter-active{
    transition: 1s;
} 
.slide-leave-active {
    transition: 1s;
}
.slide-enter{
    position: absolute;
    transform:translateX(-100%)
}
.slide-enter-to{
    position: absolute;
    transform: translateX(0)
}
.slide-leave{
    position: absolute;
    transform: translateX(0)
}
.slide-leave-to{
    position: absolute;
    transform:translateX(100%)
}
</style>

加入transition标签就可以了，跟vue的动画无缝连接在一起呀

代码在这里

7 总结

总体来说，vue-router还是相当简单易懂的，而且，加入了实际应用中常用到的功能，例如是路由守卫，路由懒加载等等。

相关文章