vue-router的学习笔记

路由的定义：一组key-value的对应关系

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

专门用于单页面应用(SPA)（导航区不变，展示区变）

VueRouter:监测路径的变化

根据程序员配置的route规则（举例：/class），展示班级组件

路由的key是路径(/class)，value是组件（班级组件）

路由分类（前后端路由是两个东西，两码事）：

后端路由：

1）理解：value是function,用于处理客户端提交的请求。

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

前端路由：

value是component,用于展示页面内容

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

2022年2月7日以后，vue-router的默认版本，为4版本。vue-router4只能在vue3中使用。vue-router3只能在vue2中使用。强行将vue-router4在vue2中使用，会报错。

过程：

1.打开一个新的终端。

npm i vue-router@3

// 引入VueRouter
import VueRouter from 'vue-router'
// 应用插件
Vue.use(VueRouter)
new Vue({
    ...
    router:'hello',
    ...
})

既然都到这里了，发现和vuex，store文件夹,index.js 有很多相似之处

2.src下新建目录：router ，创建index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'
// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

3.再次回到main.js

import router from './router'
new Vue({
    ...
    router:router
    ...
})

一切都好使了吗？不

App.vue

<!-- 原始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提供了新的标签<router-link>供程序员调用,class什么都不用变,href需要写成to,且to里的内容是/xxx(不能写成相对路径)  。。实现了路由的切换-->
// 将active 可以配置在active-class属性中 是 在和vue-router说点击谁 就把active对象放在哪个todo中
<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>

vue-router 将 最终转为了

点击About 和 Home 按钮，功能正常了

最后展示页的切换

这个时候About、Home两个组件都弄好了，但vue不知道你要在什么地方用他俩的template

类似插槽功能(spot)，在vue-router中，借助的作用：指定组件的呈现位置

117节done