Vue-Router入门-掌握基础知识_vue router中,( )标签将路由匹配到的组件渲染在这里。

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。
const routes = [
{ path: ‘/foo’, component: Foo },
{ path: ‘/bar’, component: Bar }
]

// 3. 创建 router 实例，然后传 routes 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲app') //整个应用只有一…router`属性获取到.
// 现在，应用已经启动了！

### 🧍‍♀️动态路由匹配


#### 动态路径参数


`path: '/user/:id'`


应用场景: 例如一个`User`组件,对于不同用户(ID各不相同),都要使用这个组件来渲染.

const User = {
template: ‘

User

’
}

const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: ‘/user/:id’, component: User }
]
})

About

一个 “路径参数” 使用冒号 `:` 标记, 当匹配到一个路由时,参数值会显示在 `this.$route.params` 供每个组件使用.


![在这里插入图片描述](https://img-blog.csdnimg.cn/9593379af2874f8aac903099e758dbbb.png#pic_center)


实例:  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c7e777dc76ae48b298905d328c5a553e.png#pic_center)



> 
> **注意**: 当使用路由参数时, 例如从 /user/foo 到 /user/bar ,原来的组件实例会被复用, 组件的生命周期不会在被调用.
> 
> 
> 


#### 捕获所有的路由或404路由

{
// 匹配所有的路径.
path: ‘*’
}
{
// 匹配以 ‘/user-’ 开头的任意路径
path: ‘user-*’
}

> 
> 含有通配符的路由应该放在最后,路由{path: ‘\*’} 通常用于客户端404错误.
> 
> 
> 


当使用一个通配符时, `$route.params`会自动添加一个名为 `pathMatch` 的参数. 它包含了URL通过 通配符 被匹配到的部分:


![在这里插入图片描述](https://img-blog.csdnimg.cn/89830ef1f4ef42e9951bdb2fa2626440.png#pic_center)


**匹配优先级**


有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。


### 🚶‍♂️嵌套匹配


一个被渲染组件同样可以包含自己的嵌套 `<router-view>`


**children 配置项**

const router = new VueRouter({
routes: [
{
path: ‘/user/:id’,
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 中
path: ‘profile’,
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: ‘posts’,
component: UserPosts
}
]
}
]
})

### 🚶‍♀️编程式导航


除了使用 `<router-link>` 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。


#### router.push()


**`router.push(location, onComplete?, onAbort?)`**


* 想要导航到不同的 URL，则使用 `router.push` 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
* 当你点击 `<router-link>` 时，这个方法会在内部调用，所以说，点击 `<router-link :to="...">` 等同于调用 `router.push(...)`。


**该方法可传入的参数**

// 字符串
router.push(‘home’)

// 对象
router.push({path: ‘home’})

// 命名的路由
router.push({name: ‘user’, params: {userid: ‘132’}})

// 带参数
router.push({path: ‘register’, query: {plan: ‘private’}})
// 这里写入path, 使用params传参不生效.
router.push({path: ‘register’, params: {plan: ‘private’}}) //XXX

#### router.replace()


**`router.replace(location, onComplete?, onAbort?)`**


跟 `router.push` 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。


#### router.go()


**`router.go(n)`**


这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 `window.history.go(n)`。


### 🏃‍♂️命名路由


有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。


**name 配置项**

const router = new VueRouter({
routes: [
{
path: ‘/user/:userId’,
name: ‘user’,
component: User
}
]
})

**跳转链接的时候就可以直接使用**

<router-link :to=“{name: ‘user’, params: {userId: 123}}”

router.push({name: ‘user’, params: {userId: 123}})

### 🏃‍♀️命名视图


有时候想同时 (同级) 展示多个视图，而不是嵌套展示.


例如创建一个布局，有 `sidebar` (侧导航) 和 `main` (主内容) 两个视图，这个时候命名视图就派上用场了。**你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。**


**HTML**

**JS**

const router = new VueRouter({
routes: [
{
path: ‘/’,
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})

### 🚣‍♂️两个新的生命周期钩子


1.作用: 路由组件所独有的两个钩子, 用于捕获路由组件的激活状态


2.具体名字:

activated 路由组件被激活时触发.页面初始化只能激活一次，只有在第一次进入页面时会触发一次。
deactivated路由组件失活时触发.

activated 与 deactivated 和 beforeRouteEnter 与 beforeRouteLeave 的执行时间:  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5979e4f949d1421080764f1c82080133.png#pic_center)


![在这里插入图片描述](https://img-blog.csdnimg.cn/12376aa73fc94eed9fa3f1c54f5a5274.png#pic_center)


**应用场景:**


* ​ deactivated() : 清除定时器.


	+ ```
#### 最后

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

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