VUE ROUTER---路由

已于 2022-06-25 09:48:24 修改
阅读量1k 收藏 4
点赞数
分类专栏： 前端 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导航函数

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

笑别弯腰
关注
专栏目录
vue-router之router-link
dh0536的博客
11-24 3901
<router-link>组件支持用户在具有路由功能的应用中（点击）导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link>比起写死的<a href="...">会好...
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(13)——router-link
最新发布
m0_74386799的博客
09-20 781
vue-router提供了一个全局组件router-link(取代a标签)右键检查，发现多了两个类：可以直接写样式：点击即可显示高亮。router-link-active 模糊匹配to="/my" 可以匹配/my /my/a /my/b .....router-link-exact-active 精确匹配to="/my" 只能匹配/myrouter-link的类名太长了，可以通过配置实现定制：linkActiveClass:"类名1",
vue 中router-link属性设置(2)
qinglp的博客
04-08 1084
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。[外链图片转存中…(img-9OQn8ihO-1712507102011)][外链图片转存中…(img-ll4oNxPW-1712507102011)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。
Vue路由(router-link)——高亮、动态传参
m0_53951384的博客
11-07 5528
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入...
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-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
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 中router-view不能渲染的解决方法
08-30
例如，在创建 VueRouter 实例时，需要使用 const router = new VueRouter({ routes: routes });，而不是 const router = new VueRouter({ routers: routers });。 此外，开发者还需要确保在 components 中正确地...
vue-router的router-link详解
wfly blog
10-30 1491
<router-link> <router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link>比起写死的<a...
Vue Router的基本使用、router-link以及router-link-active
drhnb的博客
07-10 8043
在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。 使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。
从零开始学VUE之VueRouter(Router-link 详解)
彼岸舞的博客
06-28 1833
Router-link 详解 <router-link> 的属性。 to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- ...
vue的router-link(路由)的详细使用---router的跳转
weixin_45667289的博客
03-08 4万+
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-link页面跳转及传参
weixin_42949219的博客
12-22 5555
注意，这种方式需要在路由配置中定义了对应名称的路由，并且参数会被作为 URL 的一部分，如 /destination/123/example。，store是vuex应用的核心，也就是一个容器，包含着应用中大部分的状态，更改store中的状态唯一方法是提交mutation。上面的示例中，/destination 是目标路由的路径，query 属性被用来传递参数。// // 如果取消跳转地址栏会变化，这时保持地址栏不变。// 访问 query 中的参数。// // 正常跳转。
解决Vue router-link绑定事件不生效的问题
10-15
同时，在配置Vue Router路由规则时，确保路径正确性，并注意在main.js中正确引入VueRouter实例。这些知识点对于使用Vue.js开发单页面应用（SPA）至关重要，了解并掌握它们可以帮助开发者更加高效地解决实际开发中的...
vue-router为激活的路由设置样式操作
11-20
import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [/* your routes */], linkActiveClass: 'active' // 将 'active' 类设置为激活链接的类 }) ``` 如果你只想在...
【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
weixin_72979483的博客
09-07 2303
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router
vue-router router-link
酷酷的旭
06-02 5918
个人理解vue-router能够实现当我们点击某个导航链接的时候能够动态的展示一个组件 使用方法： 安装 ：npm install vue-router 在main.js中加载使用 import Vuerouter fom 'vue-router //加载路由模块 Vue.use(VueRouter) //注册到Vue中才可以使用 配置路由表 const router ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值