认识 vue-router

谁践踏了优雅 2022-09-08 00:15 128阅读 0赞

*  **目前前端流行的三大框架, 都有自己的路由实现:**
    
     *  Angular 的 ngRouter
     *  React 的 ReactRouter
     *  Vue 的 vue-router
 *  **vue-router**
    
     *  vue-router 是 Vue.js 官方的路由插件, 它和Vue.js 是深度集成的, 适合用于构建单页面应用
     *  我们可以访问其官方网站对其进行学习: [https://router.vuejs.org/zh/][https_router.vuejs.org_zh]

*  **vue-router 是基于路由和组件的**
    
     *  路由用于设定访问路径, 将路径和组合映射起来
     *  在vue-router 的单页面应用中, 页面的路径的改变就是组件的切换

**1、安装路由 vue-router **

> **npm install vue-router **

** 2、在模块化工程中使用它 ( 因为是一个插件, 所以可以通过Vue.use() 来安装路由功能)**

*  第一步: 导入路由对象, 并且调用 `Vue.use(VueRouter)`
 *  第二步: 创建路由实例, 并且传入路由映射配置
 *  第三步: 在Vue实例中挂载创建的路由实例

// src/router/index.js
    // 配置路由相关信息
    import VueRouter from "vue-router";
    import Vue from "vue";
    
    // 1. 通过Vue.use(插件), 使用这个插件
    Vue.use(VueRouter);
    
    // 2. 创建VueRouter 对象
    const routes = [];
    const router = new VueRouter({
      // 配置路由和组件之间的映射关系
      routes
    })
    
    // 3. 将router 对象传入到Vue实例中
    export default router

**3、路由的使用**

使用Vue-router 的步骤:

*  第一步: 创建路由组件
 *  第二步: 配置路由映射: 组件和路径映射关系
 *  第三步: 使用路由: 通过 `<router-link>`和 `<router-view>`
 *  `<router-link>`: 该标签是一个 Vue-router 中已经内置的组件, 它会被渲染成一个 `<a>`标签
 *  `<router-view>`: 该标签会根据当前的路径, 动态渲染出不同的组件
 *  网站的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和`<router-view>`处于同一个灯具
 *  在路由切换时, 切换的是`<router-view>`挂载的组件, 其他内容不会发生改变

[https_router.vuejs.org_zh]: https://router.vuejs.org/zh/