今天写的是路由

什么是路由:

路由是一一对应规则的集合,不止是前端有路由这个概念,后端也有路由

今天先说说前端路由

前端路由作用是: 当浏览器写入url地址时.切换不同的组件.我们需要vue官方提供的vue-router路由系统功能模块

前端路由简单实现

说明⚠️：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置

步骤

1. 安装包
2. 配置路由
3. 使用路由

操作

1. 安装 npm i vue-router@3.5.3

2. 创建路由文件 router/index.js

// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用插件 - 重要
Vue.use(VueRouter)

// 导入组件

import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'


// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: Page1  // 装入组件 Page1
    },
    {
      path: "/page2",
      component: Page2
    },
    {
      path: "/page3",
      component: Page3
    }
  ]
})

export default router

3. 使用路由 在main.js中

import router from './router/index.js'

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

不用记C V就可以了,只需要会配置路由规则就可以了

使用路由

<router-view></router-view>

图示

小结

下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由
使用脚手架创建项目的时候可以自定义安装路由,不用手写