vue 路由vue-router

╰+攻爆jí腚メ 2021-11-01 18:36 405阅读 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 条评论，405人围观）

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

相关阅读

相关 VueRouter路由嵌套

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

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

相关 VueRouter路由传参

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

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

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

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

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

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

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

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

相关 vue 路由

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

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

相关 Vue路由

一个实例： <!DOCTYPE html> <html> <head> <title>Vue.js路由router</title>

绝地灬酷狼/ 2022年05月10日 09:44/ 0 赞/ 210 阅读

相关 vue路由

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

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

相关 Vue路由

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

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

相关 vue路由

Vue.js - vue路由一什么是路由 1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2. 前端

灰太狼/ 2022年01月05日 07:23/ 0 赞/ 288 阅读

相关 vue路由

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

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