![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiYWan5yN3ETZ0IWNlhjM0YGNzIjYhZWO0U2NidTYxMGZxQzMk9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.gif)
作者 | Jeskson
掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb
2020.1.11
背景介绍
vue router是vue.js官方的路由管理器,它和vue.js的核心深度集成,让构建单页面应用变得易如反掌,它的功能有:
嵌套的路由,或者是,视图表;模块化的,基于组件的路由配置;路由参数,查询,通配符,基于Vue.js过渡系统的视图过渡效果,细粒度的导航控制;带有自动激活的CSS class的链接,HTML5历史模式或者是hash模式,在IE9中自动降级;自定义的滚动条行为。
面试官提问,你能说出路由的概念吗?能说明一下vue-router的基本使用步骤吗?或者让你说出vue-router的嵌套路由用法怎么用?
再次询问你vue-router如何实现动态路由匹配用法呢?请说出vue-router命名路由用法?请说出vue-router编程式导航用法?
在实际业务中,去实现基于路由的方式。
快速入门
如何快速入门并掌握呢?了解路由的属性配置说明,如何页面跳转,如何子路由-路由嵌套,路由的传递参数,命名路由,命名视图,重定向,别名,过渡动画,mode与404,路由的钩子,路由的懒加载。
快速入门第一步安装,vue-router是一个插件包,需要用npm来安装。
npm install vue-router --save
vue-cli构建项目。router/index.js中。
// 引入vueimport Vue from 'vue'// 引入vue-router路由依赖import Router from 'vue-router'// 引入页面组件,命名为HelloWorldimport HelloWorld from '@/components/HelloWorld'// Vue全局使用RouterVue.use(Router)// 定义路由配置export default new Router({ routes: [ //配置路由 { path: '/', //链接路径 name: 'HelloWorld', //路由名称 component: HelloWorld //对应组件模板 } ]})
使用:main.js中
// 引入vueimport Vue from 'vue'// 引入根组件import App from './App'// 引入路由配置import router from './router'// 关闭生产模式下给出的提示Vue.config.productionTip = false// 定义实例new Vue({ el: '#app', router, // 注入框架中 components: { App }, template: ''})
页面跳转:
<router-link to="/">[显示字段]router-link><router-link to="/hello">hellorouter-link>this.$router.push('/xxx')<button @click="goHome">回到首页button>export default { name: 'app', methods: { goHome(){ this.$router.push('/home'); } }}// 后退一步this.$router.go(-1)// 前进一步this.$router.go(1)
目录
那么这篇是根据面试官会问的进行解答,请看下方目录:
在开发中,路由分后端路由和前端路由,后端路由是根据不同的用户的url请求,返回不同的内容,本质是url请求地址与服务器资源之间的对应关系。
后端路由
过程,浏览器请求url地址到后端服务器,请求url地址被后端路由拦截,服务器中有服务器资源内容,是url地址所要请求的资源内容,请求到服务器资源内容被后端路由拦截传递给浏览器。
SPA,后端渲染是由性能问题的,用户与服务器有经常提交多,后端路由就会导致网页的频繁刷新,导致性能问题,就有了ajax前端渲染,SPA是单页面应用程序,整个网站只有一个页面,内容变化是通过ajax局部更新实现,同时支持浏览器地址的前进和后退操作,spa的实现原理之一是基于url地址上的hash。
注意,hash的变化会导致浏览器记录访问历史的变化,但是hash的变化不会触发新的url请求,在实现spa过程中,最核心的技术就是前端路由。
前端路由
前端路由是根据不同的用户事件,显示不同的页面内容,本质是用户事件和事件处理函数之间的对应关系,用户触发事件,响应浏览器,浏览器中含有前端路由,事件处理函数,用户触发事件给到前端路由,响应事件处理函数,事件函数渲染相应内容给用户。
实现简单的前端路由是基于url中的hash实现的,点击菜单时改变url的hash值,根据hash的变化控制组件的切换。
监听window的onhashchange事件,根据获取到的最新的hash值,切换要显示的组件的名称
window.onhashchange = function() { // 通过location.hash获取到最新的hash值}
简单的实例:
// 切换组件的超连接
主页
财经
娱乐
// :is属性指定的组件名称,把对应的组件渲染到component标签所在位置
// 可以把component标签当前组件的占位符
定义四个组件
const zhuye = { template; '
da1
da1
'}const keji = { template: '
da2
da2
'}const caijing = { template: '
da3
da3
'}const yule = { template: '
da4
da4
'}
注册组件
const vm = new Vue({ el: '#app', data: {}, // 注册组件 components: { zhuye, keji, caijing, yule } })
动态切换
<component :is="comName">data: { comName: 'zhuye'}
监听window的onhashchange事件,根据获取到的最新的hash值,切换要显示的组件的名称
window.onhashchange = function() { // 通过location.hash获取到最新的hash值 console.log(location.hash);}href="#/zhuye" target="_blank" rel="external nofollow"
使用switch判断
switch(location.hash.slice(1) { case '/zhuye': vm.comName = 'zhuye' break; case '/keji': vm.comName = 'keji' break; case '/caijing': vm.comName = 'caijing' break; case '/yule': vm.comName = 'yule' break; }
vue-router路由管理器
vue router和vue.js的核心深度集成,可以方便的用于spa的应用程序开发
它的功能有:
支持HTML5历史模式,和hash模式;支持嵌套路由;支持路由参数,支持编程式路由,支持命名路由。
路由的进阶,导航守卫,路由元信息,过渡效果,数据获取,滚动行为,路由懒加载。
vue-router的基本使用
基本使用步骤,第一步,引入相关的库文件,第二步,添加路由连接,第三步,添加路由填充位,第四步,定义路由组件,第五步,配置路由规则并创建路由实例,第六步,把路由挂载到vue根实例中。
router-link中,to表示目标路由的链接,repalce,当点击时会调用router.replace()而不是router.push(),导航后不会留下history记录。
<router-link :to="{path: '/a'}" replace>router-link>
append,在当前路径前添加基路径。我们从/a导航到一个相对路径da,如果没有配置append,则路径为/da,如果配了,则为/a/da
<router-link :to="{ path: '/da' }" append>router-link>
基本使用步骤,第一步引入相关的库文件
// 导入vue文件,为全局window对象挂载vue构造函数