Vue路由

Posted 2020-11-16 goooood

源：B站视频

---

路由

• 前端路由与后端路由不同

---

JS

• hash #
  • onhashchange() hash值发生改变触发；
  • window.location.hash用来访问或改变当前页面的hash值
    • location.hash

---

Vue

• 先安装vue-router路由模块

• <router-view></router-view>
  • 这是 vue-router 提供的元素，专门用来 当作占位符，将来，路由规则，匹配到的组件，就会展示到这里面。因此，将router-view认为是一个 占位符。
• 链接要以#开头，如果没有#，点击链接将返回一个真实的页面，会报错。
  • 例<a herf = ‘#/login‘>登录</a>
• <router-link></router-link>
  • vue-router 提供的元素，管理链接？
  • <router-link to = ‘/login‘>登录</router-link>结果与上例一样
• new一个路由对象时，可以为 构造函数 传递一个配置对象。
  • 配置对象中的 route 表示[路由匹配规则]
  • 每个路由规则都是一个对象，有两个必须的属性：
    1. path，表示监听， 提供 路由地址；
    2. component， 表示 如果匹配到了该path，则展示component对应的组件，且该属性值必须时组件模板对象，而不是组件名；
• 在vue实例中，将路由规则对象注册到实例中，监听URL地址变化，再展示对应组件。
  • vue实例中， router: routerobj,