2021前端技术面试必备Vue:(三)Router篇

海军
• 阅读 1453

2021前端技术面试必备Vue:(三)Router篇

前两章陆续已经更新了Vue的基础入门篇文章和Vue组件篇文章,本章将更新Vue Router篇,前两篇掌握差不多了,你可以开发单页面应用,所有数据都在一页呈现出来,不能学习了本章文章后,你可以实现一个精美的Web应用了,本章将会介绍到路由的转换实现,路由的动态传递参数,路由的守卫...... 。

Vue路由器

路由初体验

安装
npm install --save  vue-router
使用

router.js 路由配置

@ 如果你的Vue-Cli 是 3 的版本,可以在创建项目的同时,可以选择安装router 插件
vue ui

1. 创建好项目,自带的router文件就是路由配置文件



import Vue from 'vue'
// 引入 vue-router
import VueRouter from 'vue-router'
import Father from '../views/Father.vue'

2. 在全局使用这个vue-router
Vue.use(VueRouter)


3. 配置路由选项
const routes = [
{
path: '/',
name: 'Father',
component: Father,
meta: {
keepAlive: true // 需要缓存
}
}
]

3. 创建Vue-router实例,挂载router配置项
const router = new VueRouter({
routes
})

4.最后导出 Vue-router实例, 提供给 Vue 挂载使用
export default router


index.js Vue入口文件配置

import Vue from 'vue'
import App from './App.vue'
1. 引入 路由配置文件
import router from './router'
import store from './store'

Vue.config.productionTip = false

2. 将路由挂载到 Vue实例中使用。
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

动态路由传递参数

const routes = [
{
1. 通过在url后:参数即可
path: '/home/:name',
name: 'home',
component: Father,
meta: {
keepAlive: true // 需要缓存
}
}
]



2.接收路由参数: this.$route.params.路由参数

捕获404页面

{
// 会匹配所有路径
path: '*'
}
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
}


当使用一个通配符时,$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分:

1. this.$route.params.pathMatch 来获取通配符后的url

嵌套路由

1. 通过在父路由中添加 children 数组,直接引入嵌套组件和配置path
2. 页面中使用 通过 <router-link to="/父路由path/嵌套path">小红</router-link>
3. 配置显示入口 <router-view></
router-view>

{
path: '/teacher',
name: 'teacher',
component: () => import('../views/Teacher/Teacher.vue'),
children: [
{
path: 'xiaohong',
component: () => import('../views/Teacher/XiaoHong.vue')
},
{
path: 'xiaoming',
component: () => import('../views/Teacher/XiaoMing.vue')
}
]
}
2021前端技术面试必备Vue:(三)Router篇

编程式导航

导航分为:

router.push来实现编程式导航

<router-link> 声明式导航创建标签来定义导航链接

router.push会向历史记录栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。

router.push
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
router.replace

它不会向历史添加新记录,它会替换当前路径

1.声明式写法
<router-link :to="..." replace>

2.编程式写法
router.replace(...)
router.go(n)

路由的前进和后退,前进合并整数,后退预定负数

命名路由

所谓命名路由,给路由配置名称属性,然后在页面中也可以使用 this.$router.push({ name: 'home',{params:name='Test'}})进行路由转换传递参数,很方便。

const routes = [
{
path: '/home:name',
name: 'home',
component: Father,
}
]



1 通过命名路由来实现 路由跳转和传递参数
this.$router.push({ name: 'home',{params:name='Test'}})

重新重定向

1. redirect: '/b'
2. 重定向的目标也可以是一个命名的路由: redirect: { name: 'foo' }

路由守卫

以以着(或)者(其),(、、、、、、、、、、、、(,),定向到登陆页。


router.beforeEach((to, from, next) => {
//我在这里模仿了一个获取用户信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用户信息存在则往下执行。
next()
} else {
//如果用户token不存在则跳转到login页面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})

路由过渡特效

1.给路由入口加入 transition


<transition>
<router-view></router-view>
</transition>



2. 实现不同的过渡特效 ,组件内使用 <transition> 并设置不同的 name。
<transition name="long">
<div class="main">...</div>
</transition>

路由懒加载

官方:当打包发展应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

1. 所有路由都放置在一个同步块中 .routerPath.js 中

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')


2. 在 router 文件中正常使用就可,使用 chunk name 来赋值 component
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/baz', component: Baz }
]
})



✨觉得不错的点赞,帮忙转发分享以下,原创不易!<

🌟关注微信公众号'前端自学社区' 获取更多资料✨

2021前端技术面试必备Vue:(三)Router篇

💥回复加群 可以加入 自学前端群💥

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4天前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
2年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
5个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
海军
海军
Lv1
海军,专注Web前端领域开发,分享开发经验与最新前端技术。 微信公众号: 前端自学社区
文章
27
粉丝
10
获赞
33