认识 vue-router

• 目前前端流行的三大框架, 都有自己的路由实现:

  • Angular 的 ngRouter

  • React 的 ReactRouter

  • Vue 的 vue-router

• vue-router

  • vue-router 是 Vue.js 官方的路由插件, 它和Vue.js 是深度集成的, 适合用于构建单页面应用

  • 我们可以访问其官方网站对其进行学习: 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>挂载的组件, 其他内容不会发生改变