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

最后更多分享：前端字节跳动真题解析

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

• 

HTML

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JS

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 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
}).$mount('#app')
//整个应用只有一个router, 可以通过组件的 `$router`属性获取到.
// 现在，应用已经启动了！

🧍‍♀️动态路由匹配

动态路径参数

path: '/user/:id'

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

const User = {
  template: '<div>User</div>'
}

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

<router-link class="list-group-item" active-class="active" to="/user/afo">About</router-link>

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

实例:

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

捕获所有的路由或404路由

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

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

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

匹配优先级

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

🚶‍♂️嵌套匹配

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

children 配置项

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          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

<router-view class="view one"></router-view>
<router-view class="view two" name="b"></router-view>
<router-view class="view three" name="a"></router-view>

JS

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


**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**

### HTML

*   HTML5有哪些新特性？

*   Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

*   如何实现浏览器内多个标签页之间的通信？

*   ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

*   简述⼀下src与href的区别？

*   cookies,sessionStorage,localStorage 的区别？

*   HTML5 的离线储存的使用和原理？

*   怎样处理 移动端 1px 被 渲染成 2px 问题？

*   iframe 的优缺点？

*   Canvas 和 SVG 图形的区别是什么？


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



### JavaScript

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

*   问：0.1 + 0.2 === 0.3 嘛？为什么？

*   JS 数据类型

*   写代码：实现函数能够深度克隆基本类型

*   事件流

*   事件是如何实现的？

*   new 一个函数发生了什么

*   什么是作用域？

*   JS 隐式转换，显示转换

*   了解 this 嘛，bind，call，apply 具体指什么

*   手写 bind、apply、call

*   setTimeout(fn, 0)多久才执行，Event Loop

*   手写题：Promise 原理

*   说一下原型链和原型链的继承吧

*   数组能够调用的函数有那些？

*   PWA使用过吗？serviceWorker的使用原理是啥？

*   ES6 之前使用 prototype 实现继承

*   箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

*   事件循环机制 （Event Loop）


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





*   了解 this 嘛，bind，call，apply 具体指什么

*   手写 bind、apply、call

*   setTimeout(fn, 0)多久才执行，Event Loop

*   手写题：Promise 原理

*   说一下原型链和原型链的继承吧

*   数组能够调用的函数有那些？

*   PWA使用过吗？serviceWorker的使用原理是啥？

*   ES6 之前使用 prototype 实现继承

*   箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

*   事件循环机制 （Event Loop）


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