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中引用的!!!!

Logo

前往低代码交流专区

更多推荐