VUE ROUTER---路由

已于 2022-06-25 09:48:24 修改
阅读量848 收藏 3
点赞数
分类专栏： 前端 vue 文章标签： vue.js 前端 javascript
于 2021-07-06 16:15:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l_l_l_l_l_l_l_li/article/details/118491300
版权

一、认识和安装vue-router

vue-router是基于路由和组件的
路由用于设定访问路径, 将路径和组件映射起来.
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换

安装vuerouter:

npm install vue-router@4
细节：@4代表的是安装vuerouter4最新的版本

二、路由的使用步骤

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、路由的默认路径

在这里插入图片描述

四、router-link

在这里插入图片描述

通过.router-link-active这个类名可以给router-link这个内置组件样式

五、路由懒加载

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

魔法注释： /* webpackChunkName:“home-chunk” */

六、路由的其他属性

在这里插入图片描述

跳转也可以用name属性跳转，meta属性是定义一些元数据 可以使用$route.meta获取 具体后边讲

七、动态路由

1、动态路由基本匹配

在这里插入图片描述

2、获取动态路由的值

在这里插入图片描述
在这里插入图片描述

八、匹配多个参数

在这里插入图片描述
在这里插入图片描述

九、notfound

在这里插入图片描述
在这里插入图片描述

十、路由的嵌套

在这里插入图片描述
在这里插入图片描述
自己写的：
在这里插入图片描述
在这里插入图片描述

嵌套式路由的注意事项–

如果url有参数的话 它的子路由应该这样

在这里插入图片描述

十一、编程式跳转页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

十二、router-link的v-slot

在这里插入图片描述

1、修改默认的router-link渲染的a标签

在这里插入图片描述
-------原本router-link渲染出来的是一个a标签，使用插槽后首页就渲染成了button标签，但是这个button标签还是包含在a标签内的------
在这里插入图片描述

------甚至不止可以写一个标签，可以写很多个标签，像下边这样，下边的button和strong标签都可以跳转到首页------
在这里插入图片描述

------把a标签去掉------

router-link加上custom属性就可以把a标签去掉，但是这样就没办法完成跳转，可以用navigate实现跳转，后边讲

在这里插入图片描述

------插槽除了可以放一个标签以外，还可以放一个组件------
在这里插入图片描述

2、router-link的作用域插槽

------route-link是内置组件 这个内置组件本身通过作用域插槽给我们传递过来一些值--------

(1)、href

href就是跳转到的路径 （to的路径）

在这里插入图片描述

（2）、route

配置的route标准化之后会有一大堆属性（不止自己添加的name、path、component、children等等），这些属性可以通过route获取到

在这里插入图片描述

（3）、navigate

给router-link添加custom属性的时候就没办法完成跳转了，此时可以使用navigate,navigate是一个导航函数

在这里插入图片描述
点击button触发click事件然后触发navigate导航函数

十三、后台管理系统的权限控制动态路由

笑别弯腰
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
英文 | Vue 路由器选项卡 Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ：打开、切换、关闭、刷新、重置 :check_mark_button: ：用于外部网站 :check_mark_button: 定制： , slot , contextmenu :check_mark_button: 18n :check_mark_button: 标签切换后保持滚动位置 :check_mark_button: 缓存控制：选项卡规则、可缓存、最大保持活动、可重用 :check_mark_button: 动态标签信息：标题、图标、工具提示 :check_mark_button: 初始标签：进入页面时最初打开的标签 :check_mark_button: 恢复标签：浏览器刷新后重新打开标签 :check_m
声明式导航＜router-link＞：解决a标签自带的默认样式
YY的博客
11-30 3789
声明式导航原理
Vue声明式路由
weixin_63763239的博客
03-17 1907
在vue3中的声明式路由 <router-view class="page" /> router-view是一个视图容器 （通常叫做一个坑 用来放vue组件 ） <router-link to="/">首页</router-link> router-link在浏览器中会默认渲染为 a 标签 这样在a标签里面通过href属性跳转的页面 href属性写一个#号叫锚点跳转 vue的路由跳转都是基于原生js中的 pushState这个属性 是实
vue的router-link(路由)的详细使用---router的跳转
weixin_45667289的博客
03-08 3万+
1.在相关页面使用router-link （其中的to中的内容是指转向的页面） 2.在components文件下添加A.vue 和B.vue 文件（在其他文件下添加也可以，只要修改后面路径就好） 3.在index.js 文件中导入相关路径 （import … from …） 4.并在index.js文件中填写相关path： 5.成功展示 6.设置返回（rounter-link的to处只要填写 / 就可以返回到首页）（可要可不要） 使用路由和a标签的区别： 标签定义超链接，用于从一张页面链..
Vue Router的基本使用、router-link以及router-link-active
drhnb的博客
07-10 3940
在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。 使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。
vue2.0中router-link详解
热门推荐
冰雪为融的博客
07-17 18万+
在vue2.0中，原来的v-link指令已经被&lt;router-link&gt;组件替代了 &lt;router-link&gt;组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的&lt;a&gt;标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 &lt;router-link&gt;...
vue-router的router-link详解
wfly blog
10-30 1425
<router-link> <router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link>比起写死的<a...
Vue学习Day11 router-link属性、动态路由、路由的懒加载、嵌套路由、路由的参数传递、代码跳转路由
AIpoem的博客
07-14 3574
1. router-link补充 2. 通过代码跳转路由 3. 动态路由 4. 路由的懒加载 5. 嵌套路由 6. 命名视图 7. 路由的参数传递
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router 中router-view不能渲染的解决方法
12-08
最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; ...
Vue 标签router-link 作用、用法
最新发布
A乐神的博客
01-18 2065
Vue 标签router-link 作用、用法
从零开始学VUE之VueRouter(Router-link 详解)
彼岸舞的博客
06-28 1731
Router-link 详解 <router-link> 的属性。 to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- ...
关于Vue中路由配置和router-link的一点补充
技术+管理+经验+沟通+人品=>合格的项目管理者
04-29 1031
Vue的多<router-view>配置说明，地址栏参数传递或调用说明。几个主要文件之间的关系（public/index.html, src/router/index.js, public/App.vue, public/main.js之间的关系）
router-link+tag+a路由失败
风凉zz的博客
03-26 924
router-link失效场景 <router-link to="/home/xxxxxx/" tag="li"> <a href="javascript:">点我</a> </router-link> 这种情况下点击li标签区域，不会路由，URL地址也没有改变。反而点击<a>标签能正确路由。 原因 router-link通过tag改...
vue: router-link 动态路由
u012872771的博客
09-12 1407
动态路由: 根据路由的不同请求不同的数据。 $router 获取vue-router实例 $route 获取url的详细信息 :id表示在user后任意参数都可以访问到对应组件，但是必须有" / "。 如: loc...
router-link打开新页面跳转和a标签防止默认跳转及各个属性
m0_62823653的博客
06-13 8684
两种写法 第二部分：a标签防默认跳转（vue写法） 第三部分：router-link打开新页面跳转 第一种：标签式跳转 第二种：编程式跳转
一、webpack的全局安装和局部安装以及使用
l_l_l_l_l_l_l_li的博客
05-26 3840
1、webpack的使用前提 webpack的运行环境是依赖Node环境的，所以电脑上必须有node。安装node 14.15.5版本，npm 6.14.11版本 2、webpack和webpack-cli全局安装和使用 **方法：npm install webpack webpack-cli -g** 安装好之后就可以在终端运行webpack，当我们运行webpack的时候，webpack会找当前目录下的src/index.js作为入口，如果项目中没有这个文件夹那么就会报错。出口文件默认为dist文件夹
vue router-view路由详解
05-13
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页应用变得易如反掌。Vue Router 通过管理应用的URL，实现了组件的切换，让用户可以在单页应用中享受到和传统多页应用相同的体验。 在 Vue Router 中，我们可以通过 <router-view> 组件来渲染匹配到的组件。它是 Vue Router 中最重要的组件之一。当我们的路由切换时，<router-view> 组件可以根据当前的 URL 自动切换到匹配到的组件，不需要手动处理。 下面是一些关于 <router-view> 组件使用的详解： 1. <router-view> 组件是函数式组件，它不会渲染出任何实际的 HTML 元素，而是渲染出匹配到的组件。 2. 每次路由切换时，<router-view> 组件会销毁旧的组件并创建新的组件实例。 3. 如果在路由配置中没有指定组件的 name 属性，则默认使用默认组件。 4. 如果有多个 <router-view> 组件，需要在路由配置中指定每个 <router-view> 组件应该渲染哪个组件。 5. 如果没有匹配到任何路由，则 <router-view> 组件不会渲染出任何内容。 6. 可以使用 <keep-alive> 包裹 <router-view> 组件，让路由切换时保持组件状态不被销毁。 7. 可以使用 <transition> 包裹 <router-view> 组件，为路由切换添加过渡动画效果。 总的来说，<router-view> 组件是 Vue Router 中最常用的组件之一。它可以让我们在构建单页应用时轻松地管理路由和组件，为用户提供更好的体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值