vue基础

一 .什么是路由
映射关系
1.设备和ip的映射关系
2.接口和服务的映射关系
3.路径和组件的映射关系

二. 为什么使用路由
单页面应用(SPA): 所有功能在一个html页面上实现
前端路由作用: 实现业务场景切换
优点：
- 整体不刷新页面，用户体验更好
- 数据传递容易, 开发效率高
缺点：
- 开发成本高(需要学习专门知识)
- 首次加载会比较慢一点。不利于seo

三.vue-router介绍
目标: 如何在Vue项目中集成路由
官网: https://router.vuejs.org/zh/
vue-router模块包
它和 Vue.js 深度集成
可以定义 - 视图表(映射规则)
模块化的
提供2个内置全局组件
声明式导航自动激活的 CSS class 的链接

四.组件分类
- 页面组件 - 页面展示 - 配合路由用
- 复用组件 - 展示数据/常用于复用

五. vue-router使用(7步:)

1. 下载vue-router  (yarn add vue-router@3.5.1)
2. 引入
import VueRouter from 'vue-router'
3. 注册全局组件
Vue.use(VueRouter)
4. 规则数组
const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配规则
  },
  {
    path: "/find",
    name: "Find",
    component: Find,
  },
5. 生成路由对象
const router = new VueRouter({
  routes,// routes是固定key(传入规则数组)
  // mode: "history" // 默认不写是"hash"
})
Vue.config.productionTip = false

6. 路由对象注入到vue实例中, this可以访问$route和$router
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

7. 设置挂载点-当url的hash值路径切换, 显示规则里对应的组件到这 
      <router-view></router-view>

vue路由 - 声明式导航
1. vue-router提供了一个全局组件 router-link
2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3.