vue2面试题——路由

1. 路由的模式和区别

路由的模式：history，hash

区别：

1. 表象不同

    history路由：以/为结尾，localhost:8080——>localhost:8080/about

    hash路由：会多个#，localhost:8080/#/——>localhost:8080/#/about

2. 关于找不到当前页面，发送请求的问题

    history会给后端发送一次请求（所以history模式的时候，一般会再配一个404页面）

    hash不会去发送请求

3. 关于项目打包，前端自测问题

     history模式下打包后，默认情况下看不到内容（需要额外去配置一些东西）

     hash模式下打包后，可以看到内容

2. 子路由和动态路由

子路由是指在一个路由内定义的嵌套路由

动态路由是指在路由定义中使用动态段来匹配不同的参数。

const router = new Router({mode: 'history',routes: [{path: '/',name: 'home',component: Home},{path: '/user/:id', /* /user/:id是一个动态路由，其中:id是动态的参数 */name: 'user',component: User, /*父组件*/children: [{// 子路由path: 'profile',component: () => import('./components/UserProfile.vue')},{// 子路由path: 'posts',component: () => import('./components/UserPosts.vue')}]}]
})
/*在vue实例中使用router*/
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({el: '#app',router,render: h => h(App)
})/* User.vue组件（父组件） */
/* 当访问/user/123/profile或/user/123/posts时，:id参数会被设置为123，
子组件UserProfile.vue或UserPosts.vue会被渲染在User.vue的<router-view></router-view>中。*/
<template><div class="user"><h1>User {{ $route.params.id }}</h1><router-view></router-view> /* 使用<router-view></router-view>来渲染子路由内容 */</div>
</template>

3. 路由传值

路由传值可以通过两种方式实现：

1. 使用路由参数（Params）

2. 使用查询字符串（Query）

如果你需要在路由之间传递持续的、重要的信息，使用路由参数可能更合适。

如果只是传递一些非必需的、临时的信息，使用查询字符串可能会更好。

/* 使用路由参数 */
1. 路由配置
{path: '/user/:id',name: 'user',component: User
}
2. 导航到路由并传递参数
this.$router.push({ name: 'user', params: { id: 123 }})
3. 接收参数（在 User 组件内）
created() {console.log(this.$route.params.id); // 输出：123
}/* 使用查询字符串 */
1. 路由配置
{path: '/user',name: 'user',component: User
}
2. 导航到路由并传递查询字符串
this.$router.push({ path: 'user', query: { name: 'John' }})
3. 接收查询字符串（在 User 组件内）
created() {console.log(this.$route.query.name); // 输出：John
}

4. 导航故障

当前页跳当前页时会出现的问题

/*解决方法*/
import VueRouter from 'vue-router'
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {return routerPush.call(this,location).catch(error => error)
}

5. $router和$route区别

$router是一个大类，不仅包含当前路由，还包含整个路由的属性和方法

$route包含当前路由对象

6. 导航守卫

例如一个商城项目，会有一个个人中心页，假如个人中心页面有个我的订单模块，如果已经登录的话那么点击我的订单就可以进入到我的订单页面，如果没有登录的话，点击我的订单就会跳转到登录页引导用户去登录。

const routes = [{path: '/',name: 'home',component: HomeView,},{path: '/about',name: 'about',beforeEnter: function(to,from,next){if(true){next(); /*next()表示通行*/}else{next('/login');}}component: () => import ('../views/AboutView')}
]

1. 全局守卫：

beforeEach路由进入之前

afterEach路由进入之后

2. 路由独享守卫

beforeEnter路由进入之前

3. 组件内守卫

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前