vue2路由的详解_vue2 中 获取router

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:‘/about’,
component:About
},
{
path:‘/home’,
component:Home
}
]
})

//暴露router
export default router

* 实现切换（active-class可配置高亮样式）

 

About

* 指定展示位置

 

#### 4.2 多级路由


1. 配置路由规则，使用children配置项：

 

routes:[
{
path:‘/about’,
component:About,
},
{
path:‘/home’,
component:Home,
children:[ //通过children配置子级路由
{
path:‘news’, //此处一定不要写：/news
component:News
},
{
path:‘message’,//此处一定不要写：/message
component:Message
}
]
}
]

2. 跳转（要写完整路径）：

 

News

3. 指定展示位置

 

#### 4.3 query参数


1. 传递参数

 

跳转

<router-link
:to=“{
path:‘/home/message/detail’,
query:{
id:666,
title:‘你好’
}
}”

跳转

2. 接收参数：

 

$route.query.id
$route.query.title

#### 4.4 命名路由（可以简化路由的跳转）


1. 给路由命名：

 

{
path:‘/demo’,
component:Demo,
children:[
{
path:‘test’,
component:Test,
children:[
{
name:‘hello’ //给路由命名
path:‘welcome’,
component:Hello,
}
]
}
]
}

2. 简化跳转：

 

跳转

跳转

<router-link
:to=“{
name:‘hello’,
query:{
id:666,
title:‘你好’
}
}”

跳转

#### 4.5 params参数


* 配置路由，声明接收params参

 

{
path:‘/home’,
component:Home,
children:[
{
component:Message,
children:[
{
name:‘xiangqing’,
path:‘detail/:id/:title’, //使用占位符声明接收params参数
component:Detail
}
]
}
]
}

* 传递参数

 

跳转

<router-link
:to=“{
name:‘xiangqing’,
params:{
id:666,
title:‘你好’
}
}”

跳转

> 
> 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
> 
> 
>
* 接收参数：

 

$route.params.id
$route.params.title

#### 4.7 props配置

#### 总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。



万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)