前端模拟面试练习提升题

mode与404

1、mode模式

代码示例：

export default new Router({
    mode: 'history', //mode模式
    routes: [...]
})

mode取值说明：
（1）histroy：URL就像正常的 url，示例：http://localhost:8080/home
（2）hash：默认值，会多一个“#”，示例：http://localhost:8080/#/home

2、404页面设置

如果访问的路由不存在，或者用户输入错误时，会有一个404友好的提示页面，配置如下：
（1）在/src/router/index.js中加入如下代码：

// 404
{
    path: '*',
    component: () => import('@/components/404')
}

（2）在src/components/404.vue中编写如下代码：

<template>
    <div class="hello">
        <h1>404 not found</h1>
    </div>
</template>
<script>
export default {
    data () {
        return {

        }
    }
}
</script>

<style scoped>
</style>

过渡动画

1、代码示例

（1）在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性，代码如下：

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

（2）加入CSS，一共4个CSS类名，四个类名与transition的name属性有关，比如name=”fade”，相应的css如下：

/*页面切换动画*/
/*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/
.fade-enter-active {
    transition: opacity .5s;
}
/*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/
.fade-enter {
    opacity: 0;
}
/*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
.fade-leave {
    opacity: 1;
}
/*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
.fade-leave-active {
    opacity:0;
    transition: opacity .5s;
}

2、过渡模式mode

  • in-out：新元素先进入过渡，完成之后当前元素过渡离开，默认模式。
  • out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。
————————————————