Vue基础笔记 路由

1.路由

• 路由：路径和组件的映射关系
• 目标：实现单页面应用（SPA）
• 单页面应用：所有功能在一个HTML页面上实现
• 前端路由作用：实现业务场景切换
• 优点：整体不刷新页面，用户体验更好。数据传递容易，开发效率高
• 缺点：首次加载会比较慢
• 使用路由：
  1. 下载路由。yarn add vue-router
  2. 在main.js中引入VueRouter函数
  3. 使用 Vue.use 将构造函数 VueRouter 加载到 Vue 上。这一步 VueRouter 注册了 两个全局组件 RouterLink 和 RouterView
  4. 配置路由规则。一个对象表示一条映射规则，请求什么路径，切换什么组件。let routes = [{path: 路径 ,component:组件名}]
  5. 根据规则创建路由对象。let router= new VueRouter({ routes })
  6. 将路由对象注入到 new Vue 创建的实例中
  7. 在 App.vue 中使用 router-view 标签
• 组件分类：页面组件，复用组件

2.声明式导航

• 在 App.vue 中使用 router-link 标签，添加 to 属性。实质上最终会渲染成a标签。自动帮我们添加了高亮的类名，router-link-acti