Vue中路由 (Vue Router)，送大厂面经一份

2、router-link使用

作用:用来替换我们在切换路由时使用a标签切换路由

好处:就是可以自动给路由路径加入#不需要手动加入

（1）使用router-link切换路由

登录组件

注册组件

---

登录组件

注册组件

（2）根据路径去切换路由

登录组件

注册组件

---

登录组件

注册组件

---

登录组件

注册组件

（3）根据名称去切换路由 官方推荐 解耦合

• 官方建议使用名称切换，可以和当前路由配置的path解耦合 修改path属性不会影响到路由切换

登录组件

注册组件

---

登录组件

注册组件

---

登录组件

注册组件

---

---

登录组件

注册组件

总结:

1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径

2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签

三、通过js切换路由的方式

================================================================================

当前vue实例中 存在两个路由相关的对象

$router 当前路由对象 | $router路由管理器对象

切换路由使用时 路由管理器对象 $router

• 语法：this.$router.push({name:"目标路由的name属性值"})

2、通过js切换路由的方式

---

登录组件

注册组件

---

<button @click=“toLogin()”>切换到登录

2、切换到同一路由报错

• 通过js程序切换路由时 存在的一个错误提示

• 原因：反复切换同一路由组件出现错误提示：

vue-router.js:2071 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/login".

• 解决方案：

（1）通过程序去切换路由时，添加一个判断，如果要切换的是对应的路由，使用的路由组件不切换

methods: {

toLogin() {

console.log(this);

//使用路由管理器对象 推入新的路由对象 替换原有的路由

if(this.$route.name!=“login”){ //判断 当前的路由对象是否要切换的路由

this.$router.push({name:“login”});

}

},

toRegister() {

//使用路由管理器对象 推入新的路由对象 替换原有的路由

if(this.$route.name!=“register”)

this.$router.push({name:“register”});

}

}

(2)通过配置的形式

• 反复切换同一个路由出现问题的解决方案 (配置信息)

const VueRouterPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (to) {

return VueRouterPush.call(this, to).catch(err => err)

}

四、默认路由

=========================================================================

作用:用来在第一次进入界面是显示一个默认的组件

//2、创建路由 1、管理组件 2、配置路由规则

const router = new VueRouter({

// 指定路由规则

routes: [

{path: “/”, redirect: “/login”},//配置根路由 切换方式为：重定向到指定路径

{path: “/login”, component: login,name:“login”},

{path: “/register”, component: reg,name:“register”},

{path: “*”, component: notFound} //路径错误时的提示

]

});

五、路由中参数传递

============================================================================

1、第一种方式传递参数 传统方式

（1）通过?号形式拼接参数

我要登录

（2）组件中获取参数

const login = {

template:‘

用户登录

’,

data(){return {}},

methods:{},

created(){

console.log(“=============>”+this.$route.query.id+"======>"+this.$route.query.name);

}

};

2、第二种方式传递参数 restful风格

指定动词: get post put delete

（1）通过使用路径方式传递参数

我要注册

var router = new VueRouter({

routes:[

{path:‘/register/:id/:name’,component:register} //定义路径中获取对应参数

]

});

（2）组件中获取参数

const register = {

template:‘

用户注册{{ $route.params.name }}

’,

created(){

console.log("注册组件中id: "+this.$route.params.id+this.$route.params.name);

}

};

六、 嵌套路由

==========================================================================

1、声明最外层和内层路由

商品管理

商品添加

商品编辑

//声明组件模板

const product={

template:‘#product’

};

const add = {

template:‘

商品添加

’

};

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

前端资料汇总

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

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
  图片转存中…(img-yobBZYQy-1711011427461)]
  [外链图片转存中…(img-wRbecpzl-1711011427462)]
  [外链图片转存中…(img-JvrH7tIA-1711011427462)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-du3H8DM5-1711011427462)]

总结

前端资料汇总

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

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！