vue-router技术点

1.- 如何在脚手架环境中集成Vue路由系统？（vue(2) + vue-router(3)）

  - 第一步：安装路由v3版本，注册路由

    - cnpm i vue-router@3.5.4 -S  // @用于指定版本、-S表示安装成功后把这个包记录在package.json的“dependencies”中。

    - 新建src/router.js文件，注册路由Vue.use(VueRouter)

  - 第二步：创建路由实例、定义路由规则，并在main.js挂载路由系统

    - export default new VueRouter({mode, routes:[]})

    - 在main.js挂载路由 new Vue({ router })

  - 第三步：在合适的位置放置一个视图容器和菜单

    - 在App.vue的视图中放置一个 <router-view>显示url匹配成功的组件。

    - 在App.vue的视图中使用 <router-link>制作菜单，点击跳转url。

2.路由模式

hash路由：#，背后监听onhashchange事件实现，部署上线不会出现404

history路由：背后基于history api 实现，部署上线会出现404问题

3.全局组件

<router-link>

to属性跳转目标

tag属性用于最终渲染什么标签（默认时a标签）

<router-view>

name属性用于制定命令视图

4.两个内置API

$route：表示路由信息

this.$route.fullPath

this.$router.query

this.$route.params

this.$router.meta

$router：表示路由跳转

this.$router.push():路由跳转

this.$router.replace():向前跳转

this.$router.back():返回上一级

5.路由跳转

声明式跳转

<router-link>方式跳转

编程时跳转

$router方式跳转

6.路由传参

query传参：在跳转路由的url后面用?a=1&b=2&c=3这种方式传参，在另一个组件中使用this.$route.query接收。

动态路由传参：像这样 `{path: '/good/:id', component }`定义路由规则，在这条动态路由规则对应的组件中使用this.$route.params接收，或者开启props:true后使用 props选项来接收。

7.命名视图与命名路由

所谓的命名视图，意思是给<router-view>加一个name属性。

所谓的命名路由，意思是给{path,component}路由规则取一个名字。

8.两个优化：路由懒加载、重定向与别名

 路由懒加载：当一个SPA应用程序中的页面足够多，我们需要根据路由系统进行按需加载组件（而不是一次性加载所有组件），该怎么实现呢？使用路由懒加载（背后原理是Webpack代码分割技术、Vue异步组件）。路由懒加载，是一种性能优化方案。

重定向与别名：当用户访问一个未定义的路由时，给一个重定向（跳转到另一个已定义的路由上），这是一种用户体验的优化。重定向规则，一般要放在路由规则的最后面。什么是别名？别名是path的简写，可以用于路由访问；什么时候需要用到别名？当path比较复杂时，需要给它设计一个别名。

9.两个难点：嵌套视图（嵌套路由）、导航守卫（路由元信息）

嵌套视图（嵌套路由）：当我们设计类似知乎官网那样的一级菜单、二级菜单时，就要用到嵌套视图。所谓“嵌套视图”，从组件树的角度来讲，<router-view>所显示的组件的内部还有<router-view>；从路由规则的角度来讲，{path,component,children}带有children这个属性；从产品设计的角度来讲，一级菜单对应的页面中还有二级菜单。

导般守卫：在router实例对象上有三个重要的全局钩子（beforeEach、beforeResolve、afterEach），每次url发生变化时，都会触发这三个钩子按顺序执行。那么以后我可以在这些钩子编写验证逻辑，如果验证通过就放你过去，你就可以正常访问你想访问的页面；如果验证失败，就阻止你访问目标页面，这就实现“守卫”的效用了。在路由中，使用导航守卫和路由元信息，可以做鉴权、还可以做权限设计。