路由基础理解

142 阅读1分钟

路由的理解 路由有前端路由有后端路由 前端路由:一个url地址,对应那个组件

image.png 后端路由:一个接口地址,对应一段接口地址

image.png 前端路由的工作原理: 根据地址变化(不在重新向服务器发送请求),去局部更新不同的页面内容,完成前端业务场景切换 路由的基本使用 1.安装包 2.配置路由 3.使用路由 1.安装

npm i vue-router@3.5.3 2.创建路由文件 router/index.js 导入插件

image.png

3.使用路由 main.js中

image.png

使用路由

image.png

链接导航router-link 作用:用于提供路径链接,实现页面跳转 格式

<router-link to="home">首页</router-link>

要点:

  • 是vue-router提供的组件
  • router-link最终会渲染成a链接
  • router-link自带链接导航高亮的功能

链接导航,用router-link配合to,实现点击切换路由 router-link组件会被vue解析成a标签,但不能直接通过a标签来跳转, 如果当前路由被激活会添加特殊的类名