Vue-router中对path的误解和说明-path的正确理解。

Date 20210603 By WJB

由于工作需要，最近开始学习Vue框架，遇到的第一个问题是关于路由（router）方面的问题。

管理路由的解释网上有很多文章 ，我感觉不错的几篇文章。

https://router.vuejs.org/zh/guide/#html

https://blog.csdn.net/qq_31967569/article/details/91546294

看如看的代码 

import home from '@/components/home'
import about from '@/components/about'

routes: [
    {
      path:"/home",
      component: home
  },{
      path: "/about",
      component: about
  },// 重定向
  {
      path: '/', 
      redirect: '/home' 
  }

routes是路由器的集合，路由是由path和component组成，component很容易理解就是导出的组件，但是这个path如何理解？又如何使用？

path这里是用来定义每个路由的引用路径，用在 router-link中，to属性的值就是路由中path的值，如下所示

 <img src="./assets/logo.png">
    <header>
    <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
  </div>

注意：path是自己定义的，在route-link中引用的！！！！