一、相关理解
1. vue-router 是什么？
vue-router 是 vue 的一个插件库，专门用来实现 SPA 应用。
2. SPA 是什么？
- 单页 Web 应用（single page web application，SPA）。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
- 数据需要通过 ajax 请求获取。
3. 路由的理解
- 什么是路由？
- 一个路由就是一组映射关系（key-value）。
- key 为路径，value 可能是 function 或 component。
路由的分类
后端路由：
（1）理解：value 是 function，用于处理客户端提交的请求。
（2）工作过程：服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。
前端路由：
（1）理解：value 是 component，用于展示页面内容。
（2）工作过程：当浏览器的路径改变时，对应的组件就会展示。
二、路由的基本使用
1. 安装 vue-router
在终端键入：npm i vue-router@3
对应的是 vue2.x 版本
2. 应用插件
Vue.use(VueRouter)
3. 编写 router 配置项
// 该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router"; // 引入组件 import About from '../components/About.vue' import Home from '../components/Home.vue' // 创建并暴露一个路由器 export default new VueRouter({ routes: [ { path: '/about', component: About }, { path: '/home', component: Home }, ] })
4. 实现切换（active-class可配置高亮样式）
active-class 是 vue-router 模块的 router-link 组件中的属性，用来做选中样式的切换
点击哪个导航栏哪个导航栏高亮
<router-link active-class="active" to="/about">About</router-link> <router-link active-class="active" to="/about">Home</router-link>
5. 指定展示位置
指定在页面中展示的位置
<router-view></router-view>
三、实例：路由的基本使用
点击导航栏，切换显示的内容，并且页面不刷新，地址栏地址更改。
https://www.bilibili.com/video/BV1Vt4y1s77g?t=1.7
路由基础
main.js
- 首先在 main.js 中引入路由（vue-route）和路由器（router）并配置
// 引入 Vue import Vue from 'vue' // 引入 App import App from './App.vue' // 引入 VueRouter import VueRouter from 'vue-router' // 引入路由器 import router from './router' // 关闭 vue 的生产提示 Vue.config.production = false // 应用组件 Vue.use(VueRouter) //创建 vm new Vue({ el:'#app', render: h => h(App), router: router })
./router/index.js
在 router 文件夹下的 index.js 文件中引入事先定义好的组件
通过 new VueRouter 创建一个路由器
路由器里面来配置路由：routes: [{...}]
路径：path: '/xxx'，用于和 to='/xxx' 匹配，如果不匹配，则内容不呈现。
组件：component: 组件名，路径映射到的组件
// 该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router"; // 引入组件 import About from '../components/About.vue' import Home from '../components/Home.vue' // 创建并暴露一个路由器 export default new VueRouter({ routes: [ { path: '/about', component: About }, { path: '/home', component: Home }, ] })
Home.vue
- Home 组件，配置呈现的内容
<template> <h2>我是Home的内容</h2> </template> <script> export default { name: "myHome", }; </script>
About.vue
- About 组件，配置呈现的内容
<template> <h2>我是About的内容</h2> </template> <script> export default { name: "myAbout", }; </script>
App.vue
- 标签不写 <a>，而是 <router-link>
- 属性不写 href，而是 to
- 地址不写 ./xxx.html，而是 /xxx，呈现在地址栏中。用于和 path: '/xxx' 匹配，如果不匹配，则内容不呈现。
- 指定呈现位置用标签 <router-view>
<template> <div> <div class="row"> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"><h2>Vue Router Demo</h2></div> </div> </div> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <div class="list-group"> <!-- 原始html中我们使用a标签实现页面的跳转 --> <!-- <a class="list-group-item active" href="./about.html">About</a> --> <!-- <a class="list-group-item" href="./home.html">Home</a> --> <!-- Vue中借助router-link标签实现路由的切换 --> <router-link class="list-group-item" active-class="active" to="/about">About</router-link> <router-link class="list-group-item" active-class="active" to="/home">Home</router-link> </div> </div> <div class="col-xs-6"> <div class="panel"> <div class="panel-body"> <!-- 指定组件的呈现位置 --> <router-view></router-view> </div> </div> </div> </div> </div> </template> <script> export default { name: "App", components: { }, mounted() { console.log(this); }, }; </script>
四、几个注意点
- 路由组件通常放在 pages 文件夹，一般组件通常放在 components 文件夹。
- 通过切换，隐藏了的路由组件，默认是被 销毁 的，需要的时候再去挂载。
- 每个组件都有自己的 $route 属性，里面存储着自己的路由信息。
- 整个应用只有一个 router，可以通过组件的 $router 属性获取到。
- 不积跬步无以至千里 不积小流无以成江海
