作者 | 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 来安装.
npminstallvue-router--save
vue-cli 构建项目. router/index.JS 中.
// 引入 vueimportVuefrom'vue'// 引入 vue-router 路由依赖 importRouterfrom'vue-router'// 引入页面组件, 命名为 HelloWorldimportHelloWorldfrom'@/components/HelloWorld'// Vue 全局使用 RouterVue.use(Router)// 定义路由配置 exportdefaultnewRouter({routes: [// 配置路由 {path:'/',// 链接路径 name:'HelloWorld',// 路由名称 component: HelloWorld// 对应组件模板} ]})
使用: main.JS 中
// 引入 vueimportVuefrom'vue'// 引入根组件 importAppfrom'./App'// 引入路由配置 importrouterfrom'./router'// 关闭生产模式下给出的提示 Vue.config.productionTip =false// 定义实例 newVue({el:'#app', router,// 注入框架中 components: { App },template:'<App/>'})
页面跳转:
- <router-link to="/">
- [显示字段]
- </router-link>
- <router-link to="/hello">
- hello
- </router-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 的变化控制组件的切换.
监听 Windows 的 onhashchange 事件, 根据获取到的最新的 hash 值, 切换要显示的组件的名称
Windows.onhashchange =function(){// 通过 location.hash 获取到最新的 hash 值}
简单的实例:
- <div id="app">
- // 切换组件的超连接
- <a href="#/zhuye">
- 主页
- </a>
- <a href="#/keji > 科技 </a>
- <a href=" #/caijing>
- 财经
- </a>
- <a href="#/yule">
- 娱乐
- </a>
- // :is 属性指定的组件名称, 把对应的组件渲染到 component 标签所在位置 // 可以把 component 标签当前组件的占位符
- <component :is="keji">
- </component>
- </div>
定义四个组件
constzhuye = { template;'<h1>da1</h1>'}constkeji = {template:'<h1>da2</h1>'}constcaijing = {template:'<h1>da3</h1>'}constyule = {template:'<h1>da4</h1>'}
注册组件
constvm =newVue({el:'#app',data: {},// 注册组件 components: { zhuye, keji, caijing, yule } })
动态切换
- <component :is="comName">
- </component>
- data: { comName: 'zhuye' }
监听 Windows 的 onhashchange 事件, 根据获取到的最新的 hash 值, 切换要显示的组件的名称
Windows.onhashchange =function(){// 通过 location.hash 获取到最新的 hash 值 console.log(location.hash);}href="#/zhuye"
使用 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 文件, 为全局 Windows 对象挂载 vue 构造函数 // 导入 vue-router 文件, 为全局 Windows 对象挂载 vuerouter 构造函数
第二步添加路由链接
- // router-link 是 vue 中提供的标签, 默认会被渲染为 a 标签
- // to 属性默认会被渲染成为 href 属性
- // to 属性的默认会被渲染为 #开头的 hash 地址
- <router-link to="/user">User</router-link>
- <router-link to="/register">Register</router-link>
第三步添加路由填充位
// 路由填充位, 叫做路由占位符 // 将来要通过路由规则匹配到的组件 // 会被渲染到 router-view 所在的位置
第四步添加定义路由组件, 如果有两个路由, 添加两个组件
varUser = {template:'<div>user</div>'}varRegister = {template:'<div>register</div>'}
第五步, 最重要, 配置路由规则和创建路由实例
// 创建路由实例对象 varrouter =newVueRouter({// routes 是路由规则数组 routers: {// 每个路由规则都是一个配置对象, 其中至少包含 path 和 compontent 两个属性 // path 表示当前路由规则匹配的 hash 地址 {path:'/user',component: User}, {path:'/register',component: Register}}}
第六步, 把路由挂载到 vue 根实例中
newVue({el:'#app',// 为了能够让路由规则生效, 必须把路由对象挂载到 vue 实例对象上 router});
路由重定向
路由重定向值的是, 用户在访问地址 a 的时候, 强制用户跳转到地址 c, 从而展示特定的组件页面, 通过路由规则的 redirect 属性, 指定一个新的路由地址, 可以方便地设置路由的重定向.
varrouter =newVueRouter({routers: [// 其中, path 表示需要被重定向的原地址, redirect 表示将要被重定向的新地址 {path;'/',redirect:'/user'}, {path:'/user',component: User}, {path:'/register',component:Register} }})
vue-router 嵌套路由
嵌套路由, 是什么呢? 是父级别的路由下有子级别的路由. 点击父级路由链接显示模板内容, 模板内容又有子级别的路由链接, 点击子级别的路由显示子级别的模板内容.
第一步, 创建父级路由组件模板, 父级路由链接和父级组件路由的填充位
- xxx
- <router-link to="/xx">xx</router-link>
- </p>
- <div>
- // 控制组件的显示位置
- <router-view></router-view>
- </div>
第二步, 创建子级别的路由模板, 子级别路由链接, 子级别路由填充位
- constRegister = { template;`<div>
- <h1>dada</h1>
- <router-link to="/register/xxx">xxx</router-link>
- <router-link to="/register/xx">xx</router-link>
- // 子路由填充位置
- <router-view/>
- </div>`}
第三步, 嵌套路由的配置, 父级路由通过 children 属性配置子级路由
constrouter =newVueRouter ({routes: [ {path:'/user',component: User }, {path:'/reg',component: Register,// 通过 children 属性, 为 / register 添加子路由规则 children: [ {path:'/reg/p1',component: p1}, {path:'/reg/p2',component: p2} ] } ] })
创建子路由链接, 子路由占位符的时候, 别忘记了要写子组件的代码.
- comst p1 = {
- template: '<h1>da</h1>'
- }
vue-router 动态路由匹配
什么是动态路由匹配, 为啥要动态路由匹配?
场景如下
- da1
- <router-link to="/user/2">da2</router-link>da3
- {
- path: '/user/1, component: user}
- { path: '/user/2, component: user
- }
- {
- path: '/user/3, component: user
- }
动态参数, :id
varrouter =newVueRouter({routes: [// 动态路径参数 冒号开头 {path:'/user/:id',component: User } }})constUser = {// 路由组件中通过 $route.params 获取路由参数 template:'<div>U {{ $route.params.id }} </div>'}
路由组件传递参数 props, 将 props 的值设置为布尔类型
constrouter =newVueRouter({routes: [// 如果 props 被设置为 true, route.params 将会被设置为组件属性 {path:'/user/:id',component: User,params:true} ]})constUser = {props: ['id'],// 使用 props 接收路由参数 template:'<div>da {{id}} </div>'// 使用路由参数}
props 的值可以为对象类型的参数, 传递动态参数
constrouter =newVueRouter({routes: [// 如果 props 是一个对象, 它会被按原样设置为组件属性 {path:'/user/:id',component: User,props: {name:'dada',age:12}} ]})constUser = {props: ['name','age'],template:`<div> {{name}} + {{age}} </div>`}
props 的值为函数类型的参数
constrouter =newVueRouter({routes: {// 如果 props 是一个函数, 则这个函数接收 route 对象为自己的形参 {path:'/user/:id',component: Use,props:route=>{{name:'dada',age:12,id: route.params.id }}} } })constUser = {props: {'name','age','id'},template:`<div> {{name}} + {{ age }} + {{id}} </div>`}
什么叫做命名路由
路由的 name 可以指定命名名称, 不用写 path. 命名路由的配置规则
- // 路由导航
- const router = new VueRouter({
- routes: [
- {
- path: '/user/id',
- name: 'user',
- component: User
- }
- ]
- })
- <router-link :to="{name:'user', params: {id:1} }">dada</router-link>
- router.push({
- name:'user', params: {
- id:1
- }
- }}
编程时导航, 第一种, 声明式导航是通过点击链接实现导航的方式, 如网页中的 a 标签或是 vue 中 router-link 标签; 第二种, 编程式导航通过 JavaScript 的形式 API 实现导航的方式, 如网页中的 location.href.
- // 编程式导航 this.$router.push('hash 地址'this.$router.go(n)constUser = {
- template:'<div><button @click="goButton"> 跳转 </button></div>',methods: {
- goButton:function(){
- // 用编程的方式控制路由跳转 this.$router.push('/register');
- }
- }
- }constda = {
- template:`<div>
- <button @click="goBack"> 后退 </button>
- </div>`methods: {
- goBack() {
- this.$router.go(-1)
- }
- }
- }
router.push() 方法
- router.push('/dada')
- router.push( {
- path: '/dada'
- })
- router.push( {
- name: '/dada', params; {
- id: 1
- }
- })
- router.push( {
- path: '/dada', query: {
- name:'dada'
- }
- })
案例, 多多使用, 路由的基础语法, 嵌套路由, 路由的重定向, 路由的传参, 编程式导航等.
vue-router 默认为 hash 模式, 使用 url 的 hash 来模拟一个完整 url, 当改变 url 时, 页面不会重新加载.
constrouter =newVueRouter({mode:'history',routes: [...]})
命名视图
过渡效果
参考链接
https://router.vuejs.org/zh/
最后
欢迎加我微信 (xiaoda0423), 拉你进技术群, 长期交流学习...
来源: http://www.jianshu.com/p/5d9853bb68ae