【6月日新计划更文活动】第5天

路由 vue-router

1、路由就是一组 key——value 的对应关系

2、多个路由，需要经过路由器的管理

对 SPA 应用的理解

1、单页面 Web 应用

2、整个应用只有一个完整的页面

3、点击页面中的导航链接不会刷新页面，只会做页面的局部更新

4、数据需要通过 ajax 请求获取

SPA (single page web application) 应用：单页面应用

vue-router 的理解：vue 的一个插件库，专门用来实现 SPA应用

路由的理解

1、什么是路由

1)、一个路由就是一组映射关系 (key - value)

2)、key 为路径，value 可能是 function 或 component

2、路由分类

1)、后端路由：

①、理解：value 是 function，用于处理客户端提交的请求

②、工作过程：服务器接收到一个请求时，根据 请求路径 找到匹配的函数来处理请求，返回响应函数

2）、前端路由： ①、理解：value 是 component，用于展示页面内容

②、工作过程：当浏览器的路径改变时，对应的组件就会显示

基本路由

1、基本使用

1）、安装 Vue-Router，命令：npm i vue-router@3 -save-dev

2）、应用插件：Vue.use(VueRouter)

3）、编写 router 配置项：

// 该文件专门用于创建整个应用的 路由器
/******************************************************/
// 引入 VueRouter
import VueRouter from "vue-router";
// 引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'

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

4）、实现切换 (active-class 可配置选中样式)

 <!-- Vue中借助 router-link 标签实现路由的切换 -->
<router-link to="/about" active-class="active">About</router-link>

5）、指定展示位置：

 <!-- 指定组件的呈现位置 -->
<router-view></router-view>

2、几个注意点

1）、路由组件通常存放在 pages 文件夹中，一般组件通常存放在 components 文件夹

2）、通过切换、“隐藏”了路由组件，默认是被销毁掉的，需要的时候再去挂载

3）、每个组件都有自己的 $route 属性里面存储着自己的路由信息

4）、整个应用只有一个 router ，可以通过组件的 $route 属性获取到

Vue.js学习笔记(拾伍)

路由 vue-router

路由的理解

基本路由