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

海军 等级 464 0 0

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篇

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

收藏
评论区

相关推荐

[占山为王]我是如何四步将一个微信小程序请求库改成Taro的
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
Vue | 路由守卫面试常考
前言 最近在整理基础,欢迎掘友们一起交流学习,关注公众号<a href"https://z3.ax1x.com/2021/03/27/6zmqSI.jpg"前端自学社区</a <br/ 结尾有彩蛋哦! 🎉🎉🎉 Vue Router 路由守卫 导图目录 1. 路由守卫分类 2. 全局路由守卫 3. 单个路由守卫
JavaScript设计模式之单例模式
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; word
[前端必知 ]HTTP or TCP/IP 基础
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; padding: 0 10px; wordspacing: 0px; wordbreak: breakword; wordwrap: break
多人协作必备技能Git
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
全栈进阶:Nginx基本功能及其原理
<div class"output_wrapper" id"output_wrapper_id" style"fontsize: 16px; color: rgb(62, 62, 62); lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; fontfamily: 'Helvetica
2021前端技术面试必备Vue:(一)基础快速学习篇
由于疫情的影响,相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员, 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?<br/1.大部分的回复: 求职平台都是 ‘已回复’,然后没有下文,你遇到了吗?<br/2.各个公司对技术的要求增高<br/3.有人说开始搞副业<br/ 在我来看,这一年已经过去了四分
2021前端技术面试必备Vue:(二)组件篇
上一章已经更新了Vue基础,那么本章将更新Vue中最重要的概念组件,会介绍到组件的使用,组件传值,插槽的使用,插槽的分类。 当第一章基础掌握差不多了,然后再学习了组件的开发,那么你就可以开发简单的Vue项目,路由文章还没有更新,学习完Router后,就可以开发实战项目了。<section id"nice" datatool"mdnice编
2021前端技术面试必备Vue:(三)Router篇
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"padding: 0 10px; wordspacing: 0px; wordwrap: breakword; textalign: left; fontfamily: Opti
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Webpack 打包资源篇
<section datatools"新媒体排版" dataid"13439" datastyletype"9" style"visibility: visible;"<p style"maxwidth: 100%; visibility: visible;"<br mpafromtpl"t" style"visibility
目前最全的第三方平台 授权(OAuth2.0)登录接入指南
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)_IT全栈 华强工作室
面试必备:2021 Vue经典面试题总结(含答案)一、什么是MVVM?
什么是索引?Mysql目前主要的几种索引类型
一、索引MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度。打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是一个人力三轮车。索引分单列索引和组合索引。单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引。组合索引,即一个索引包含多个列。创
Vue 重复进入相同路由警报
路由守卫重复进入两次,报错(虽然页面还可以运行) 原因:vuerouter路由版本更新产生的问题,导致路由跳转失败抛出该错误,但并不影响程序功能 Uncaught (in promise) Error: Redirected when going from "/productDetail?VNK326acc75" to "/productTerms" via