03-路由

路由的基本使用

• 路由的底层是a标签

加载路由的方式

---

在视图中创建两个组件：一个是登录 另一是注册

---

点击登录或者注册的时候就在下面显示对应的内容

---

背=可被点击：是a标签 或者 按钮，现在我们使用的是router-link标签

---

• 使用to属性将具体的内容跳转
  

---

---

配置路径和组件的关系

---

---

---

路由传参

上面我只是将路径写了，但是如果我们有参数怎么办呢？

传统方式

---

• 你以为传过去了么？
  

---

• 结果：无法显示 并未传过去
  

怎么解决？=》使用create方法

---

---

• 获取当前组件的路由对象
  

---

• 当前路由对象如图：
  

---

---

方式二：斜杆

---

---

编程式路由跳转

上述使用的是链接，那么现在我们使用按钮

使用按钮进行跳转

点击按钮实现跳转到对应的页面去

---

路由守卫

作用：监听路由的进入和离开

代码写在全局的.js文件里面

---

---

---

路由守卫等价于拦截器

---

路由守卫的作用场景：例如：去登录的时候标题为登录，去注册的时候变为注册

子路由

比如登录我们写两个页面

---

在父登录页面选择两个子登录页面：

---

---

• 绑定路径和组件(去router目录)
  

---

---

• 但是效果并不是在对应的页面下显示，而是将整个页面替换了
  

• 说明是在app.vue中显示去了：
  
  

---

• 那怎么办呢？
  原因是：你将配置写到根里面去了
  
  

• 修改：下在子路由里面(child)