vue 面试题3

目录

1、Vue的路由实现模式：hash模式和history模式

2、请说出路由配置项常用的属性及作用 

3、编程式导航使用的方法以及常用的方法 

4、Vue如何去除URL中的# 

5、 $route和$router的区别？ 

---

#博学谷IT学习技术支持#

1、Vue的路由实现模式：hash模式和history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

2、请说出路由配置项常用的属性及作用 

路由配置参数：

​ path : 跳转路径​ component : 路径相对于的组件​ name:命名路由​ children:子路由的配置参数(路由嵌套)​ props:路由解耦​ redirect : 重定向路由

3、编程式导航使用的方法以及常用的方法 

路由跳转 ： this.$router.push()​ 路由替换 : this.$router.replace()​ 后退： this.$router.back()​ 前进 ：this.$router.forward()

4、Vue如何去除URL中的# 

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一种模式 history：new Router ({ mode : 'history', routes: [ ]})

​ 需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 “404” 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 “index.html” 页面。

5、 $route和$router的区别？ 

$route是路由信息对象，包括‘path，hash，query，fullPath，matched，name’等路由信息参数； $router是路由实例对象，包括了路由的跳转方法，实例对象等