2020前端技术面试必备Vue:(三)Router篇
2020/3/30 11:02:41
本文主要是介绍2020前端技术面试必备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') } ] } 复制代码
编程式导航
导航分为:
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, } ] 通过命名路由来实现 路由跳转和传递参数 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 } ] }) 复制代码
✨觉得不错的点赞,帮忙转发分享以下,原创不易!<
🌟关注微信公众号'前端自学社区' 获取更多资料✨
💥回复加群 可以加入 自学前端群💥
🌟关注微信公众号'前端自学社区' 获取更多资料✨
💥回复加群 可以加入 自学前端群💥
💥回复加群 可以加入 自学前端群💥
这篇关于2020前端技术面试必备Vue:(三)Router篇的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南