vue-router

路由：

将组件components映射到路由routes，然后告诉vue-router在哪里渲染它们

1.app.vue只要每个页面不变的都放上去，比如导航条/左侧栏

2.点击页卡，切换主体content的内容，导航条/左侧栏不会变动（这是路由的作用）

3.app.vue 使用视图

4.app.vue处

1
2
3
4

<el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
    <el-menu-item index="/activePublic" :class="{'isActive': active}">活动发布</el-menu-item>
    <el-menu-item index="/activeManage" :class="{'isActive': !active}">活动管理</el-menu-item>
</el-menu>

@是根目录..

error compiling template 需要一个

this.$router和router使用起来一样，使用this.$router的原因是不想在每个独立需要封装路由的组件中都导入路由

动态路由匹配：加了冒号就可以动态匹配同一组件文件夹下的组件

1
2
3

const router = new VueRouter({
    routes: [{	path:'user/:id',component: User}]
})

现在，像user/foo和user/bar都可以映射到相同的路由

一个【路径参数】使用冒号：标记，当匹配到一个路由时，参数值会被设置到this.$routes.params，可以在每个组件内使用

嵌套路由：定义：被渲染的组件中包含了自己的嵌套，叫做嵌套路由

是最顶层的出口，渲染最高级路由匹配到的组件，一个被渲染组件同样可以包含自己的嵌套。例如在User组件中添加一个

1
2
3
4
5
6
7
8
9
10
11
12

const router = new VueRouter({
    routes: [{ 
        path: '/user/:id', component: User,
            children: [{
            path: 'profile',             // 当 /user/:id/profile 匹配成功，
            component: UserProfile        // UserProfile 会被渲染在 User 的 <router-view> 中
        },{
            path: 'posts',            // 当 /user/:id/posts 匹配成功
            component: UserPosts          // UserPosts 会被渲染在 User 的 <router-view> 中
        }]
    }]
})

编程式导航

router.push(location, onComplete?, onAbort?)

想要导航到不同的URL，可以使用router.push方法。

声明式

编程式router.push(…)  该方法的参数可以是一个字符串路径，或者是一个描述地址的对象

route.go(n)

命名路由

User

等同于

router.push({name: ‘user’,params:{userid:123}})

这两种方式都会把理由导航到/user/123路径

命名视图

可以在界面拥有多个单独命名的视图，而不是只有一个单独的出口

视图层：  可以弹出多个视图层

1
2
3

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

index.js层：

1
2
3
4
5
6
7
8
9

const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}}]})

重定向和别名

从/a重定向到/b，重定向的意思是当用户访问/a时，URL会被替换成/b，然后匹配路由/b

1
2
3
4
5

const router = new VueRouter({
    routes: [
        { path: '/a', redirect: '/b' }
    ]
})

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

别名可以将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构

路由组件传参

通过props解耦

HTML5 History模式

vue-router使用URL的hash来模拟一个完整的URL，当页面改变时，页面不会重新加载

路由的history模式，利用History.pushstate API 来完成URL跳转而无须加载页面  mode: ‘history’

导航守卫

通过跳转或取消的方式守卫导航。

当一个导航触发时，全局前置守卫按照创建顺序调用，守卫是异步解析

const router = new VueRouter({ … })

router.beforeEach((eo,from,next)=>{ … })

to 即将要进入的路由对象

from 当前导航正要离开的路由

next 一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数   确保要调用next方法，否则钩子就不会被resolved

全局解析守卫

用router.beforeResolve注册一个全局守卫，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

全局后置钩子/路由独享的守卫/组件内的守卫

beforerouteenter{在渲染该组件的对应路由被confirm前调用}  不能访问this，传一个回调给next来访问组件实例，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，支持给next传递回调的唯一守卫

beforerouteupdate{在当前路由改变，但是该组件被复用时调用}

boforerouteleave{导航离开该组件的对应路由时调用}

路由元信息

定义路由的时候可以配置meta字段

1

ptah: 'bar',component: Bar, meta: { requireAuth: true }

过渡动效

单个路由的过渡

1
2
3
4
5
6

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
}

基于路由的动态过渡

1
2
3
4
5
6
7
8
9
10
11

<transition :name="transitionName">
    <router-view></router-view>
</transition>
``````javascript
watch: {
    '$route' (to, from) {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
}

数据获取

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

马上导航和渲染组件 → created钩子中获取数据 → 在数据捕获期间展示loading状态

导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

在beforeRouteEnter守卫中获取数据，在数据获取次成功后调用next方法

滚动行为

使用前端路由，当切换到新路由时，页面滚到顶部，或者原先位置，vue-router能做到，这个功能只在支持history.pushstate的浏览器中使用

scrollBehavior(to,from,savedPosition){ return 期望滚动到那个位置 }

返回对象 { x: number , y: number }

1

if(savedPosition){ return savedPosition} else{return {x:0,y:0}}

还支持异步滚动

懒加载

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就很高效了

结合vue的异步组件和webpack的代码分割该功能，实现路由组件的懒加载。