Vue路由

1. 基本概念：

• route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
• routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
• router 是一个机制，相当于路由的管理者，当用户点击home 按钮，router 到routes 中去查找到对应的 home 内容，所以页面中就显示了 home 内容。

2. Vue路由实现过程

Vue的所有内容都是组件化的，把路径和组件对应起来之后利用router配对路径，渲染相应组件。

<router-link>``定义页面中点击的部分，``<router-view>定义显示的部分。<router-link to="/home”>就定义了点击后去的页面。

• 一个路由route的组成分为两部分-path和component 前者指路径，后者是组件

• 多个路由组成一组路由routes

  const  routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
  

• 由router对创建的路由进行管理，通过构造函数创建出router对象

  const router =new VueRouter（{routes}）
  

• 配置完成后，将router实例注入到vue根实例中

  const app = new Vue({
    router
  }).$mount('#app')
  

  当用户点击router-link标签时，就会去寻找它的to属性，to属性的路径与routes配置的path去相对应，从而找到匹配的组件，将组件渲染到<router-view>标签所在。router-link的本质为a标签，to属性对应a标签的href属性。

3. 路由重定向-常用于设置初始页面

例如使访问路径为/ 或为/login时都能访问到login页面，则routes配置如下

	path:"/login",
	component: login

    path: '/', 
    redirect: '/login

如果不用重定向而直接pah：/ component：login，将会导致两个路径指向同一个组件，vue报错-存疑，一个路径不指向两个组件就行了呗？

---

2024.7.31