6.1.1 vue-router 的理解
vue 的一个插件库,专门用来实现 SPA 应用
6.1.2 对 SPA 应用的理解
- 单页 Web 应用(single page web application,SPA)。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
- 对比 多页面应用是 点击一个链接 跳转到别的页面 页面一直在刷新 跳转
- 数据需要通过 ajax 请求获取。
6.1.3 路由的理解
- 什么是路由?
-
- 一个路由就是一组映射关系(key - value)
-
- key 为路径, value 可能是 function 或 component
- 路由分类
-
- 后端路由: 1) 理解:value 是 function, 用于处理客户端提交的请求。 2) 工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据。
-
- 前端路由: 1) 理解:value 是 component,用于展示页面内容。 2) 工作过程:当浏览器的路径改变时, 对应的组件就会显示。
前提:
每一个要展示的内容类别都是组件
导航的路径需要自己写
路由的规则 什么路径对应什么组件
路由的基本实现
- 先创建一个router文件夹 文件里index.js来写路由
- 先引入VueRouter VueRouter本质是一个构造函数 所以new一个router直接导出
- routes是一个数组 里面是每个路由对象 里面写着路径和组件的对应关系
- 所以还得引入组件
//专门用于创建路由器
import VueRouter from 'vue-router';
//因为路由对应组件 所以还得引入组件
import myHome from "../components/home.vue";
import itAbout from "../components/about.vue";
//VueRouter本质是一个构造函数 先创建一个路由router
export default new VueRouter({
//routes是一个数组 里面是对象键值对
//这竟然是routes不是routers
routes:[
{
path:'/about',
component:itAbout
},
{
path:'/home',
component:myHome
}
]
})
- 在main.js中引入路由 设置为全局匹配 因为全局匹配需要vue 而newvue 在main.js中
- 凡是全局匹配的东西需要在vm里写上router 才能够全局使用
//引入路由
import VueRouter from 'vue-router'
//引入路由器router 创建在router里的index文件
import router from './router/index'
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el: '#app',
render: h => h(App),
//全局引入了vuerouter就可以用router
router:router
})
- 在app组件中 在需要跳转的位置(如a标签)用router-link自动转换成可以跳转路由的a标签
- active属性的意思 是这个a被点击时
- 它有active-class属性 点击时的样式
- router-view指定路由组件出现的位置 类似插槽的作用 这样就会让组件里的内容出现在父组件的这里(相当于在父组件的哪里写子组件)
<!-- 原本使用连接条转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!-- router-link 其实就是转换成了a标签 active-class展示点击时的样式-->
<router-link class="list-group-item" active-class="active" to="/about"
>a的名字</router-link
>
<router-link class="list-group-item" active-class="active" to="/home"
>展示名字</router-link
>
---
<!-- 指定组件的呈现位置 也就是路由匹配路径下 页面的组件 -->
<router-view></router-view>
需要分类组件 pages里路由组件
通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载
切换时 就是组件频繁的销毁挂载的过程
参与路由配置的组件 vc上有
r
o
u
t
e
(
自
己
的
)
和
route(自己的)和
route(自己的)和router(整个应用的路由 公用的)
每个组件都有自己的
r
o
u
t
e
属
性
,
里
面
存
储
着
自
己
的
路
由
信
息
。
=
=
整
个
应
用
只
有
一
个
r
o
u
t
e
r
=
=
,
可
以
通
过
组
件
的
route属性,里面存储着自己的路由信息。 ==整个应用只有一个router==,可以通过组件的
route属性,里面存储着自己的路由信息。==整个应用只有一个router==,可以通过组件的router属性获取到。
3.多级路由(多级路由)
- 配置路由规则,使用children配置项:
注意 子路由的路径不加/
在父组件里写子组件时 要加上父组件的路径
子路由 写在他的父亲路由下面 也是一个数组 叫children
export default new VueRouter({
//routes是一个数组 里面是对象键值对
//这竟然是routes不是routers
routes:[
//一级路由要加/ 二级路由不加
{
path:'/home',
component:myHome,
//子路由 写在他的父亲路由下面 也是一个数组 叫children
children:[
{
//子路由的路径不要加/
path:'news',
component:myNews
},
]
},
]
})
跳转(要写完整路径):
<router-link class="list-group-item active" active-class="active" to="/home/news">News</router-link>