1、相关理解

1.1、vue-router的理解

vue的一个插件库，专门用来实现SPA单页面网站应用

1.2、对SPA应用的理解

1、单页 Web 应用（single page web application，SPA）。

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

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

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

1.3、路由的理解

1. 什么是路由?

1. 一个路由就是一组映射关系（key - value）。一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

2. key 为路径, value 可能是 function 或 component

2. 路由分类

1. 后端路由：

1. 理解：value 是 function, 用于处理客户端提交的请求。
2. 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据。

2. 前端路由：

1. 理解：value 是 component，用于展示页面内容。
2. 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

2、基本路由使用

1. 安装vue-router，命令：npm i vue-router

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

3. 编写router配置项:

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

4. 实现切换（active-class可配置高亮样式）

   About
   

5. 指定展示位置

3、几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

使用案例：

案例样式来自bootstrap，可以下载放到vue_test22\public\css\bootstrap.css，然后在vue_test22\public\index.html页面里引用。

vue_test22\src\router\index.js

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";


import About from "../pages/About.vue";

import Home from "../pages/Home.vue";

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:"/About",
            component:About
        },
        {
            path:"/home",
            component:Home
        }
    ]
})

vue_test22\src\main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

//引入vue的路由插件
import VueRouter from "vue-router";

//使用插件，使用后就能在vue的配置项里配置一个router属性了。
Vue.use(VueRouter);

//引入路由器
import router from './router/index.js';

new Vue({
  render: h => h(App),
  router:router,
}).$mount('#app')

vue_test22\src\App.vue

vue_test22\src\pages\About.vue

vue_test22\src\pages\Home.vue

vue_test22\src\components\Banner..vue

4、多级路由（嵌套路由）

1. 配置路由规则，使用children配置项：

   routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写：/news
   				component:News
   			},
   			{
   				path:'message',//此处一定不要写：/message
   				component:Message
   			}
   		]
   	}
   ]
   

2. 跳转（要写完整路径）：

   News
   

案例

对上面的几个文件进行修改即可

vue_test22\src\pages\Home.vue

添加vue_test22\src\pages\Message.vue

添加vue_test22\src\pages\News.vue

vue_test22\src\router\index.js

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";

import About from "../pages/About.vue";

import Home from "../pages/Home.vue";

import Message from "../pages/Message.vue";

import News from "../pages/News.vue"

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:"/About",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
        
    ]
});