vue十一路由

1. vue-router 的理解

vue 的一个插件库，专门用来实现 SPA 应用

2. 对 SPA 应用的理解

1. 单页 Web 应用（single page web application，SPA）。
2. 整个应用只有一个完整的页面。
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4. 对比 多页面应用是 点击一个链接 跳转到别的页面 页面一直在刷新 跳转
5. 数据需要通过 ajax 请求获取。

3. 路由的理解

1. 什么是路由?

• 1. 一个路由就是一组映射关系（key - value）
• 2. key 为路径, value 可能是 function 或 component

2. 路由分类
3. 1. 后端路由： 1) 理解：value 是 function, 用于处理客户端提交的请求。 2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据。
4. 2. 前端路由： 1) 理解：value 是 component，用于展示页面内容。 2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

---

前提:

每一个要展示的内容类别都是组件
导航的路径需要自己写
路由的规则 什么路径对应什么组件

---

路由的基本实现

1. 先创建一个router文件夹 文件里index.js来写路由
2. 先引入VueRouter VueRouter本质是一个构造函数 所以new一个router直接导出
3. routes是一个数组 里面是每个路由对象 里面写着路径和组件的对应关系
4. 所以还得引入组件

//专门用于创建路由器
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
        }
    ]
})

2. 在main.js中引入路由 设置为全局匹配 因为全局匹配需要vue 而newvue 在main.js中
3. 凡是全局匹配的东西需要在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

})

4. 在app组件中 在需要跳转的位置(如a标签)用router-link自动转换成可以跳转路由的a标签
5. active属性的意思 是这个a被点击时
6. 它有active-class属性 点击时的样式
7. 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上有$route(自己的)和$router(整个应用的路由 公用的)
每个组件都有自己的$route属性，里面存储着自己的路由信息。==整个应用只有一个router==，可以通过组件的$router属性获取到。

---

3.多级路由（多级路由）

1. 配置路由规则，使用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>