Vue基础22

• 路由（Vue-router）
• • 使用路由
  • • 安装路由插件
    • 创建路由js文件并引入
    • • src/router/index.js
      • main.js
    • 创建组件
    • • About.vue
      • Home.vue
    • App.vue
    • 总结：
  • 几个注意点
  • • App.vue
    • Banner.vue
    • About.vue
    • Home.vue
    • 总结
  • 嵌套（多级）路由
  • • 引入bootstrap样式
    • • public/index.html
    • src/router/index.js
    • About.vue
    • Home.vue
    • HomeNews.vue
    • HomeMessage.vue
    • 总结

路由（Vue-router）

1. 路由就是一组映射关系（一组key-value的对应关系）【key为路径，value可能是function或component】
2. 多个路由，需要经过路由器的管理

SPA(single page web application)应用[单页面应用]:
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取

1. 首页路径
   
2. 点击班级管理后
   
3. 点击学科管理后
   

使用路由

2022年7月以后，vue-router 4版本成为默认版本，且vue-router4只能用在vue3中，vue-router 3才能在vue2中使用

安装路由插件

npm i vue-router@3

创建路由js文件并引入

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}]
})

main.js

import Vue from 'vue'import App from './App'//引入vue-router插件
import VueRouter from "vue-router";
//引入路由器
import router from './router'
//关闭vue的生产提示
Vue.config.productionTip = false//应用vueRouter插件
Vue.use(VueRouter)new Vue({el: "#app",render: h => h(App),router
})

创建组件

About.vue

Home.vue

App.vue

总结：

1. 安装vue-router，命令：npm i vue-router
2. 应用插件：Vue.use(VueRouter)
3. 编写router配置项：

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

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

About

5. 指定展示位置

几个注意点

App.vue

Banner.vue

About.vue

Home.vue

总结

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

嵌套（多级）路由

引入bootstrap样式

public/index.html

favicon.ico">css/bootstrap.css">

src/router/index.js

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

About.vue

Home.vue

HomeNews.vue

HomeMessage.vue

总结

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

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

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

News