vue 路由vue-router

╰+攻爆jí腚メ 2021-11-01 18:36 497阅读 0赞

**1.介绍**

vue-router： vue官方路由插件。

路由： 指单页面应用的路径管理系统。在vue中都是单页应用，相当于只有一个index.html页面，所以无法使用标签，我们使用路由来管理插件路径

**2.安装**

npm install vue-router --save-dev   //--save-dev命令直接将依赖包信息写入packege.json文件中  --save写在dependencies  -dev写在devDependencies对象下

**3.使用**

在main.js中配置路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]  
在App.vue中渲染配置的组件，因为渲染节点 \#app 在main.js中已经绑定

在路由标签<router-link>中通过 to 切换路由路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]  
官方文档：[https://router.vuejs.org/zh/installation.html][https_router.vuejs.org_zh_installation.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: /images/20211101/bcba60fb53314b5bbede8484fdd6c76f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]: /images/20211101/7f8cf42dc35c4de68f9bcd271b6b75e8.png
[https_router.vuejs.org_zh_installation.html]: https://router.vuejs.org/zh/installation.html

发表评论取消回复

表情：

评论列表（有 0 条评论，497人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter路由嵌套

1. 前言本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

怼烎@/ 2024年03月30日 18:02/ 0 赞/ 118 阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 126 阅读

相关 Vuerouter路由

1. 前/后端路由 1. 后端路由 1. 一个url（uniform resource location）对应一个页面 2. 在页面地址跳转时，后台会根据url

梦里梦外;/ 2023年03月04日 09:17/ 0 赞/ 28 阅读

相关 Vue 源码深入解析之 Vue Router、路由注册和 VueRouter 对象

一、Vue-Router 1. 路由，它的作用就是根据不同的路径映射到不同的视图。我们在用 `Vue` 开发过实际项目的时候都会用到 `Vue-Router` 这个官方

亦凉/ 2023年02月20日 08:27/ 0 赞/ 21 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 294 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 430 阅读

相关 vue 路由

[https://router.vuejs.org/zh-cn/][https_router.vuejs.org_zh-cn] 用 Vue.js + vue-router 创

蔚落/ 2022年06月07日 10:54/ 0 赞/ 293 阅读

相关 vue路由

一、App.vue中的<router-view></router-view> 凡是定义到index.js中的组件，都会被渲染到App.vue中二、路由跳转和a标签的

秒速五厘米/ 2022年03月08日 11:24/ 0 赞/ 394 阅读

相关 Vue路由

vue-router 基本使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

蔚落/ 2022年02月24日 02:56/ 0 赞/ 349 阅读

相关 vue路由

vue路由一、vue关于路由的5个重要对象 > 1、router-view：类似angular中的router-outlet，router-view会不断的改

浅浅的花香味﹌/ 2021年09月15日 14:48/ 0 赞/ 539 阅读