初识Vue之Vue默认首页router激活一直存在

最新推荐文章于 2023-07-19 16:44:08 发布

ava27949

最新推荐文章于 2023-07-19 16:44:08 发布

阅读量444

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wyt666good/p/8018155.html

版权

在用vue-router实现nav导航栏样式切换时遇到了问题，一开始在实施切换的时候想到了vue方法里的watch监听路由改变用v-bind：class=“”，可这样会有一个问题就是在初始化页面的时候导航没有带样式，需要自己手动点击一下才能正常切换导航栏的样式，

　　解决：<router-link>标签在页面中会被解析成一个<a>标签,在激活的时候a标签会被添加router-link-active的类名，所以在样式中给router-link-active的类名写切换样式就行了

问题：在给router-link-active添加完样式后在发现默认路由样式一直存在。

　　解决：给router-link添加exact属性

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

转载于:https://www.cnblogs.com/wyt666good/p/8018155.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ava27949

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

探索之路——初识 Vue Router：构建单页面应用的完整指南

小刘哥的博客

08-05

166

Vue Router 是 Vue.js 的官方路由管理器，它允许你构建单页面应用中的各种路由功能。通过使用 Vue Router，开发者可以定义多个视图（View），并在不同的路径之间进行切换，而无需重新加载页面。这样不仅提升了用户体验，还能让应用的整体性能更加出色。

Vue 技术栈带你探究 vue-router 源码手写vue-router

超逸の学习技术博客

03-12

1188

现在开始逐步深入Vue 技术栈，想了想，技术栈专栏的主要内容包括： 1、Vue源码分析 2、手把手教保姆级撸代码 3、无惧面试，学以致用，继承创新 4、谈谈前端发展与学习心得 5、手写源码技术栈，附上详细注释 6、从源码中学习设计模式，一举两得 7、编程思想的提升及代码质量的提高 8、通过分析源码学习架构，看看优秀的框架 9、项目实战开发 10、面试准备，完善个人简历

参与评论您还未登录，请先登录后发表或查看评论

router-link样式问题，在列表中保留一个router-link-active类

github_37373329的博客

03-08

1万+

最近在使用vue时发现router-link会出现两个激活类的问题如图：我的路由配置如下： export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '*', name: ...

Vue日常笔记之路由router默认主页激活样式Active一直存在

qq_44419884的博客

02-15

3030

制作导航栏时，添加路由激活样式后，在切换页面路由时，默认首页激活样式一直存在；如图：在别的页面首页也会有激活样式。解决办法：在首页的标签 <router-link to="/"> 在这里插入代码片中添加exact; 添加后为 \<router-link to="/" exact> ；效果图为： <router-link>标签在页面中会被解析成一个&lt...

vue router菜单存在点哪个但还是会显示active

weixin_30896825的博客

02-01

372

<router-link to="/" exact>Home</router-link> <router-link to="/add" exact>Add</router-link> 主要在router加上exact可以解决，点击哪个，展示哪个。。转载于:https://www.cnblogs.com/JamyWong/p/1...

vue-router动态路由设置自定义首页

weixin_48494231的博客

01-09

4438

2.遇到问题点：因为首页是用户自定义的，所以在对后端请求来的数据除了需要使用递归处理成路由的数组结构还要用自定义的首页ID查询出对应的首页路由，（我这里是记录了对应的name方便后续跳转使用），最后在递归函数的末尾往动态路由再push一个路由规则，我这里写成。总结：使用了重定向以及静态路由和动态路由，之前一直想更改静态路由里面'/'的重定向，显然不合理，静态路由在初始化页面时就已经挂载好，后续更改时比较麻烦。redirect:{name:首页name}

vue-router默认的首页渲染设置

秋来九月八

11-05

7600

在上述示例中，我们将应用程序的根路径(“/”)与名为 “Home” 的组件相关联。你可以将 “Home” 组件替换为你的应用程序的默认视图或首页组件。请注意，你可以根据你的项目需求配置不同的默认视图，只需确保将其与正确的路径相关联。在 Vue Router 中，默认的首页渲染设置通常是将一个特定的组件与根路径(“/”)相关联，以便在访问应用程序的根 URL 时显示该组件。在上述示例中，根路径(“/”)和"/default"以及"/main"路径都将匹配到相同的路由，即 “Home” 组件。

vue 项目初识路由 router.md

06-11

vue 项目初识路由 router 并进行初步配置以及简单的组件实现，初学vue router可以参考

前端开发Vue基础篇：Day01 初识Vue.pdf

11-08

在实际开发中，Vue通常会与一些支持类库结合使用，例如Vue Router用于构建单页应用，Vuex用于状态管理等。这些类库可以和Vue核心库无缝整合，使得Vue不仅仅是一个简单的视图层框架，更是一个完整的前端开发框架生态...

vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019

PGguoqi的博客

04-19

8855

未完

vue路由的基本使用

y516369的博客

08-15

932

vue路由的基本使用

vue router-view解决 router-link跳转不刷新页面问题

热门推荐

七月

11-30

3万+

说到路由，我们最熟悉的路由是什么呢？那就是路由器了。其实路由器有两个重要的功能：路由和传送路由：路由决定数据包从哪里来，到哪里去。也有是来源和目的地的路径。路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。传送：传送是将输入端的数据传送给输出端下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的

react-router实现tab页面切换，并解决选中样式首页始终选中问题

weixin_33832340的博客

07-25

3348

import React, {Component} from 'react'; import { BrowserRouter as Router, Route, NavLink } from "react-router-dom"; import './index.less'; import Index from '../../pages/Index'; import About from '....

vue-router实现首页路由的重定向效果

qq_38188228的博客

09-15

965

效果如下：需要在home界面的main区域显示一个welcome界面这里涉及到子组件 welcome是home的子组件新建Welcome.vue组件：components目录下注册组件路由当访问home的时候，直接重定向到welcome welcome组件占位将home中的main主体放置路由占位符问题：当访问/home的时候重定向到/welcome，那不是只显示个welcome文字？其实不是，因为welcome是home的子组件，所以即使重定向到welcome，..

vue-router刷新页面后回到首页

Debug的博客

06-13

1万+

今天给大家分享一个小知识点！注意查收！平时我们再写vue项目配置完路由之后会发现他不会自动回到首页，解决方法很简单，加个判断就可以啦! 在App.vue中直接写入以下代码在created钩子函数中判断当前路由地址是否在首页home，如果不在则替换为home页面 created() { if (this.$router.path !== "/home") this.$router.replace("home") } 此处用created而不用mounted的原

vue-router配置介绍和使用方法（一）

草巾冒小子的博客

05-11

2万+

1. vue-router配置流程概述： 1) 准备工作：建立项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置（具体操作，请参考[“如何进行 node.js的安装与卸载 ”](https://blog.csdn.net/qq_35393869/article/details/80088193)）； vue init webpack 项目文件名接着按要求配置Project n...

Vue学习笔记——Vue-router

Stephen-James

02-24

2万+

第1节：Vue-router入门 1、解读router/index.js文件 import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Route...

Vue 爬坑之路（三）—— 使用 vue-router 跳转页面

weixin_34050519的博客

01-13

3849

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希...