vue-router

什么是路由?

  1、一个路由 (route) 就是一组映射关系(key - value)
  2、key 为路径，value可能是 function 或 component
  3、多个路由需要路由器 (router) 进行管理

---

路由分类：前端路由、后端路由

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

  前端路由：
    1)、理解：key是路径，value是组件，用于展示页面内容
    2)、工作过程：当浏览器的路径改变时，对应的组件就会显示

---

基本使用

1. 安装 vue-router，命令 :npm i vue-router vue2配置 vue-router@3  vue3配置 vue-router@4

2. 编写 router 配置项

// router.js
// 该文件专门用于创建整个应用的路由器
import Vue from 'vue';
import VueRouter from 'vue-router';

// 引入组件
import About from '../components/About.vue';
import Home from '../components/Home.vue';

// 挂载 使用插件
Vue.use(VueRouter);

// 配置路由表,去管理一组一组的路由规则
const routes = [
 {
    	// 路由重定向
 	// 打开页面的时候, 就是一个 /
 	path: '/', 
 	// 自动切换到哪一个路由
 	redirect: '/home'
 }
 {
   
 	path: '/about',
    component: About,
  },
  {
   
    path: '/home',
    component: Home,
  },
];

// 创建一个路由器
const router = new VueRouter({
   
  routes,
});

// 将准备好的路由器暴露出去
export default router;

3. 引入 并 应用插件

// main.js
// 引入 Vue
import Vue from 'vue';
// 引入 App
import App from './App.vue';
// 引入路由器
import router from './router';

// 关闭 Vue 的生产提示
Vue.config.productionTip = false;

// 创建 Vue实例(vm)
new Vue({
   
  router,
  render: (h) => h(App),
}).$mount('#app');

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

<!-- Vue 中借助 router-link 标签实现路由的切换 -->
<router-link
 active-class="active"
 to="/about"
>About</router-link>

<router-link
 active-class="active"
 to="/home"
>Home</router-link>

5. 指定展示位置

<!-- 指定组件的呈现位置 -->
<router-view></router-view>

---

几个注意点

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

---

多级路由 (嵌套路由)

// 配置路由规则, 使用 children 配置项:

routes:[
    {
   
		path: '/about',
        component: About,
    },

    {
   
        path: '/home',
        component: Home,
        children:[ 	// 通过 children 配置项, 配置子级路由
            {
   
                // 此处可以写成完整路径 
               	// 例: /home/news
                // 或 省略父级路由 直接写子级路由
                // 例: news
               	// 但是 一定不要写成: /news
                path: 'news', 
                component: News
            }, 
            {
   
                path: 'message', // 此处一定不要成写: /message
                component: Message
            }
        ]
    }
]

<!-- 跳转(要写完整路径) -->:
	<router-link to="/home/news">News</router-link>

---

动态路由

不是写死的路由内容
而是由一个动态的数据决定

目的： 切换到该路由的时候携带一个信息

• 可以再配置路由的时候， path 位置书写 /xxx/xx/:xx</