2024年Web前端最全Vue3-组件、合成API、路由(第二篇)，iOS大厂面试题

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

student.vue

学生：{{name}}

年龄：{{classname}}

四、路由

---

1.路由的基本概念

路由中有三个基本的概念route,routes,router.

// route 它是一条路由,就是一个路径和组件的映射关

{

path:‘/’,

component: Home

}

//routes

是一组路由，把每条route的路由组合起来，形成一个数组。

routes:[

{

path:‘/’,

component: Home

},

{

path:‘/list’,

component: List

}

]

/*router 是一个路由机制，相当于一个管理者，

他来管理路由。因为routes只是定义了一组路由，

也就是一组路径和组件的对应关系,当用户点击了按

钮,改变一个路径,router会更加路径处理不同组件

*/

var router = new VueRouter({

// 配置路由

routes:[…]

})

2.安装路由

终端中输入

npm install vue-router@next

Vue3 路由用法官网

router 下的index.js

// 1. 定义路由组件.

// 也可以从其他文件导入

const Home = { template: ‘

Home

’ }

const About = { template: ‘

About

’ }

// 2. 定义一些路由

// 每个路由都需要映射到一个组件。

// 我们后面再讨论嵌套路由。

const routes = [

{ path: ‘/’, component: Home },

{ path: ‘/about’, component: About },

]

// 3. 创建路由实例并传递 routes 配置

// 你可以在这里输入更多的配置，但我们在这里

// 暂时保持简单

const router = VueRouter.createRouter({

// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。

history: VueRouter.createWebHashHistory(),

routes, // routes: routes 的缩写

})

main.js

运行一下

npm run dev

router-link组件说明:

/*

router-link是vue-router已经注册好的组件,直接使用就可以了

router-link是用来切换路由的,通过to属性来跳转到指定的路由

router-link在编译的时候会自动被编译为a标签,可以使用tag属性指定编译为你要的标签

*/

router-view组件说明:

/*

router-view用来指定当前路由所映射的组件显示的位置

router-view可以理解为占位符,为路由映射的组件占位,不同路由映射的组件通过替换显示

和动态组件的效果类似

*/

3.动态路由和404NotFound

引入：不同用户登录一个界面， 我们会发现网址中有一部分相同，但是涉及到个人id值却是不同的。这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id不同），它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死, 所以就引入了动态路由。

path:‘/students/:id’,component:students

ps:

访问/students/101和/students/102的时候都能匹配到同一个路由,走同一个路由处理函数, 咱们就得定义/students/:id的路由

router 下的index.js

import {createRouter,createWebHashHistory} from ‘vue-router’

import News from ‘…/src/components/News.vue’

import Notfound from ‘…/src/components/Notfound.vue’

const Home = { template: ‘

Home

’ }

const About = { template: ‘

About

’ }

const routes = [

{ path: ‘/’, component: Home },

{ path: ‘/about’, component: About },

{ path:‘/News/:id’,component:News},

{path:‘/:path(.*)’,component:Notfound

//设置路径名，组件名

}

]

const router = createRouter({

history: createWebHashHistory(),

routes,

})

export default router;

Notfound.vue

404 not found page

import {createRouter,createWebHashHistory} from ‘vue-router’

import News from ‘…/src/components/News.vue’

import Notfound from ‘…/src/components/Notfound.vue’

const Home = { template: ‘

Home

’ }

const About = { template: ‘

About

’ }

const routes = [

{ path: ‘/’, component: Home },

{ path: ‘/about’, component: About },

{ path:‘/News/:id’,component:News},

{ path:‘/News/:id(//d+)’,component:News},

{ path:‘/News/:id+’,component:News},/* +至少有一个·

?有或者没有，不可以重复

有和没有都可以/

{ path:‘/News/:id*’,component:News},

{path:‘/:path(.*)’,component:Notfound}

]

const router = createRouter({

history: createWebHashHistory(),

routes,

})

export default router;

4.嵌套路由

router 下的index.js

import { createRouter, createWebHashHistory } from “vue-router”;

import User from “…/src/components/User.vue”;

import hengban from “…/src/components/hengban.vue”;

import shuban from “…/src/components/shuban.vue”;

const Home = { template: “

Home

” };

const About = { template: “

About

” };

const routes = [

{ path: “/”, component: Home },

{ path: “/about”, component: About },

{ path: “/user”,

component: User,

children:[

{

path:‘hengban’,

component:hengban

},{

path:‘shuban’,

component:shuban

}

]

}

];

const router = createRouter({

history: createWebHashHistory(),

routes

});

export default router;

利用req.params.id来获取路由的不同部分的数据

router 下的index.js

import { createRouter, createWebHashHistory } from “vue-router”;

import User from “…/src/components/User.vue”;

import hengban from “…/src/components/hengban.vue”;

import shuban from “…/src/components/shuban.vue”;

const Home = { template: “

Home

” };

const About = { template: “

About

” };

const routes = [

{ path: “/”, component: Home },

{ path: “/about”, component: About },

{ path: “/user/:id”,

component: User}

];

const router = createRouter({

history: createWebHashHistory(),

routes

});

export default router;

user.vue

User页面

{{$route.params.id}}

5.使用js跳转页面

$router.push()

page.vue

<button @click=“toindexpage”>跳转到首页

router 下的index.js

import { createRouter, createWebHashHistory } from “vue-router”;

import User from “…/src/components/User.vue”;

import page from “…/src/components/page.vue”;

const Home = { template: “

Home

” };

const About = { template: “

About

” };

const routes = [

{ path: “/”, component: Home },

{ path: “/about”, component: About },

{path:‘/page/:id’,

name:‘mypage’,//别名

component:page}

];

const router = createRouter({

history: createWebHashHistory(),

routes

});

export default router;

也可以携带参数跳转

$router.replace()

this.$router.replace({path:‘/page’,query:{search:“可可”}})

$router.go(-1)返回上一个页面

$router.go(-1)

$router.go(1)前进到下一个页面

$router.go(1)

代码

<button @click=“toindexpage”>跳转到首页

<button @click=“replacePage”>替换页面

<button @click=“$router.go(1)”>前进

<button @click=“$router.go(-1)”>后退

6.命名视图

一个页面中可以·设置多个组件进行渲染

import { createRouter, createWebHashHistory } from “vue-router”;

import shop from ‘…/src/components/shop.vue’

import shopfoot from ‘…/src/components/shopfoot.vue’

import shopTop from ‘…/src/components/shopTop.vue’

const Home = { template: “

Home

” };

const About = { template: “

About

” };

const routes = [

{ path: “/”, component: Home },

{ path: “/about”, component: About },

{path:‘/shop’,

components:{

default:shop,//默认值页面是shop

shopfoot:shopfoot,

shopTop:shopTop

}

}

];

const router = createRouter({

history: createWebHashHistory(),

routes

});

export default router;

7.重定向和别名

{path:‘/mall’,

redirect:(to)=>{return{path:‘/shop’}}

}//重定向跳转到shop页面

//别名，取别名地址栏中的名字不会改成shop，依旧是cocoshop，可以取多个别名

alias:“/cocoshop”,

8.导航守卫

如果有权限那么可以实现跳转页面

router.beforeEach((to,from)=>{

return false;//返回为false没有权限，页面无显示

})

router.beforeEach((to,from,next)=>{

console.log(to)

next();//如果想要继续访问使用next()调用起来

})

import { createRouter, createWebHashHistory } from “vue-router”;

import shop from ‘…/src/components/shop.vue’

import shopfoot from ‘…/src/components/shopfoot.vue’

import shopTop from ‘…/src/components/shopTop.vue’

import mypage from ‘…/src/components/mypage.vue’

const Home = { template: “

Home

” };

const About = { template: “

About

” };

const routes = [

{ path: “/”, component: Home },

{ path: “/about”, component: About },

{path:‘/shop’,

//别名，取别名地址栏中的名字不会改成shop，依旧是cocoshop，可以取多个别名

alias:“/cocoshop”,

components:{

default:shop,//默认值页面是shop

shopfoot:shopfoot,

shopTop:shopTop

},

//具体的进入某一个组件页面

beforeEnter:(to,from)=>{

console.log(“beforeEnter”)

//只会进入page页面才会产生经常会用到

}

},

// {path:‘/mall’,

// redirect:(to)=>{return{path:‘/shop’}}

// },

{path:‘/mypage’,

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。