vue中的路由实现导航栏功能

萌新问个问题 ,用路由的时候一定要用_router-link_标签吗? 我做一个顶部的菜单栏就不可以用li、a、button等标签嘛? 可不可以不用_router-link_标签实现路由功能呢?


就是如果我想写一个导航栏,不想用到router-link标签,可以实现vue的路由功能吗?

1个回答

用vue route对象的this.$router.push(path) 跳转或this.$router.replace(path)替换

可以看下官网文档

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue导航栏跳转路由
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 1:components 新建页面 2:打开app.vue 写代码 <template> &lt...
【Vue】Vue-Router2 实现路由功能
注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 在前面文章 vue-cli基础上,开始介绍。安装vue-cli时已经将vue-router安装,若还没有安装,可通过npm npm install vue-router 一、使用路由在main.js中,需要明确安装路由功能: import Vue from
angularjs路由实现导航栏
angularjs路由实现导航栏 第一种: 路由 a{ text-decoration:none; } 首页 公司简介 关于 联系我们 var app = angular.module('myApp',["ngRoute"]); app.confi
vue 路由功能
入口文件 main.js 中引用的 router 目录下的路由文件。此文件分为二部分 一,import       写着变量和其代表的路径      路径是:components 目录。 二,const routes = {{      path      name      component: 变量 路由把 import 的变量值路径,转为 path 相关
Vue侧导航栏的实现
<template> <div class="sildebar"> <div class="home" @click="hideMenu"> 侧导航栏侧导航栏侧导航栏侧导航栏 </div> <div class="menu" v-show="isShows" @clic
vue利用路由控制实现登录功能
未使用服务器接口,登录信息保存在cookie中,可以实现登录功能 vue交流群203849104 vue使用cookie首先需要安装cookie npm install js-cookie 然后在router下面的index.js文件中引入 import cookies from 'js-cookie' 增加路由权限 router.beforeEach((...
vue根据权限生成动态路由、导航栏
基本思路: 1,创建vueRouter,用公共路由实例化 2,创建需要根据权限筛选的路由对象(在路由对象,添加必要的权限判断字段) 3,登录完成,由后端配合返回当前用户的权限集合 4,筛选出有权限的路由对象,利用vueRouter的addRoutes方法,生成完整路由 5,处理刷新页面导致vueRouter重新实例化导致路由对象不完善 (利用router.beforeEach导航守卫,,利用add...
vue中导航栏组件
1.TabController.vue <template> <div> <el-tabs v-model="active" @tab-click="onClick" @tab-remove="onRemove"> <el-tab-pane v-for="(item, index) in tabs&
vue 中固定导航栏
点击按钮回顶<template lang="html">  <div class="gotop-box">    <i @click="gotop"class="icon topIcon"></i>  </div></template><script
v-for 实现导航栏的路由跳转
导航栏的路由跳转 想要实现的效果,点击某个列表时,页面、会自动跳转到那个页面。 最开始构建页面时,使用的是7个li,先将页面布局写好。 实现的办法是: 使用v-for,循环li,点击的时候动态获取各自的跳转路由 <ul role="menubar" class="el-menu--horizontal el-menu" :class="$style.d_el_men...
vue中的路由及嵌套路由
路由是vue的核心。使用npm install --save vue-router中来使用。在文件夹下将vue-router导入,并且声明要使用vue-router;import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) 假设有home和about两个vue组件。那么我们在注册路由的使用需要定义一下内容。path为...
如何实现导航栏的功能
如何实现导航栏的功能,差不多就像csdn社区左侧那种,点击大类,小类就在下面列出来。rnrn最好是有代码,没有的话讲点思路也好。
vue用两种路由模式(hash、history)实现导航栏
一般的网站都会有导航栏,导航栏一般要求:有选中状态,点击加载对应页面,并给个选中状态,刷新之后选中不能消失,页面也要是对应的页面,点击浏览器上的前进和后退也要好使。这些东西在多页应用上可能考虑的不是太多,但是在vue单页应用上就不得不考虑了。使用vue-cli搭建好脚手架,然后用vue-router提供的两种路由来实现导航栏。写一个简单的demo,效果如下: hash模式: vue-cli...
vue 实现路由跳转
1.前一节已经安装了vue-router(npm install vue-router --save),现在就来使用一下 1)先在App.vue组件中配置路由出口 <template> <div id="app"> <div class="container"> <app-header></app-header&a
Vue 实现路由过渡动画
Vue 实现路由过渡动画 在进行路由跳转时,可以加上动画效果 更多精彩 更多技术博客,请移步 asing1elife’s blog 准备工作 编写动画效果 .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active...
vue动态路由的实现
 *通过获取后台用户信息的权限来进行路由的动态加载 store.dispatch('GetInfo').then(res => { // 拉取用户信息           let permissionData = tool.deepCopy(store.getters.permission)           let getData = (obj) => {         ...
vue路由实现登录拦截
最近在项目中登录时用到了路由拦截,记录下代码 然后在router文件夹 index.js里配置路由拦截 import Vue from "vue" import Router from "vue-router" Vue.use(Router) const router = new Router({ mode: "hash", base: process.env.BASE_URL...
vue 多层路由的实现
在vue webpack中实现多层路由的步骤归纳如下:(1)在利用webpack生成的文件中找到components文件夹,在里面生成自己想要的vue文件;        engine.vue    iexhuast.vue(2)找到router文件下的index.js,引入你生成的vue文件        import Vue from 'vue'        import Router fr...
vue实现路由按需加载
1.使用vue异步组件的方式 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },{ ...
导航栏功能怎么实现!
我见很多网站有导航功能,例如你点击一个链接,它会动态显示rn你目前所在的位置是所点击的内容,请问高手如何实现此功能,哪里有代码啊!
vue高级功能 过渡和路由
1、过渡 通过改变透明度,v-show属性,show是block,transition要配合v-show来使用,name的名字自己定义 通过css实现过渡效果 在style里面设置样式,.fade-enter和.fade-leave-active代表初始和最终样式
vue导航栏两种实现方式
1、在通过vue做导航栏的时候,开始代码是这样的: <el-menu > <el-submenu index="1"> <template slot="title&amp
vue项目nav导航栏的实现
每一个网页项目都少不了导航栏,通过原始的方法基本上都是可以写出来的。但是要写出代码量少,冗余度低的代码就要动脑子思考一下了。 最近写了一个百度地图的项目,要求底部有一个导航栏。具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种。灰色的代表未选中,选中的用带样色的图片替换。 先看一下,组件中 html结构:通过vue提供的v-for方法,进行遍历显示footNav
Vue之导航栏
                                            Vue之导航栏 今天我们来用vue实现简单的导航栏。 效果图: 根据点击的tab来展示对应的内容。其实很简单,用到了vue的v-show和绑定class。 首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。 再为每一个连接注册点击事件:@click="showDiv=1"分别让sho...
小招数之Vue中导航栏路由跳转问题
导航栏中有n多个可以跳转页面选项, 怎么写, 才可以避免同类功能代码的堆砌? 列举个反面教材: 结构部分⬇️ <div class="selections"> <div @click="toHome('Home')">Home</div> <div @click="toFlowers('Flowers')...
Vue中的路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue-2.4.0.js">&
Vue中路由的传参
文章目录示例源码结果分析   在项目开发中,需要用到路由传参的地方往往很多,比如说根据新闻列表页面查询新闻详情,此时我们就需要将该条新闻的id信息传递给新闻详情页面。   而在vue-router中,传参所用的关键字为query,其后跟参数map对象。 示例 源码 <!DOCTYPE html> <html lang="en"> <head&
Vue中的路由介绍
路由原理 传统开发方式 url改变后 立刻发起请求,响应整个页面,渲染整个页面 SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据 页面不跳转 用户体验更好 SPA single page application(单页应用程序) 前端路由 锚点值监视 ajax获取动态数据 核心点是锚点值 前端框架 Vue/angular/react都很适合开发单页应用 基本...
vue中的路由
路由的优势: 不经页面刷新请求可以直接跳转和和A链接所的不同之处 如果要使用路由就得在cmd中安装: npm insatll vue-router --save-dev 装好后重新npm run dev 在main.js中配置 用router-link代替a标签, ...
初学VUE中的路由
首先,需要下载去Vue.js官网或者Vue.js菜鸟教程下载vue-router.js插件。 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的...
vue中的路由使用
1.什么是路由,相信很多新手很蒙,网上一大片什么东西,看了也是很不懂,都是照着别人的写, 最通俗易懂的就是路由,其实就是我们html里面的a标签,点击跳转, 只不过换个方式写标签而已,按照vue的规则来传参数而已, 我的了解就是这样的,错的地方请大佬指点, 举个例子 在我们用脚手架搭建的项目中都有这个一个文件夹router index.js中 import Vue from 'vue' impo...
Vue中路由懒加载
某个路由被展示的时候,才会加载该路由的资源,而不是一下子把所有需要的资源都通过网络加载出来 写法:在router.js中引入路由的时候 资源加载情况:webpack打包的时候,会自动给每个js文件分配序列号 在academic文件中的,Response选项中html代码中有link标签,href=“/0.js”,rel="prefetch":预加载,用户在访问网页时,在网络请求闲置...
vue中路由的使用
vue中路由的使用 1.先在终端安装路由 vue install vue-router --save-dev 2.在main.js引入路由 import VueRouter from 'vue-router' 3.在main.js中使用路由 Vue.use(VueRouter) 4.配置路由 const routes=[ {path:"/",redirect:"/goods"}, {...
Vue中动态路由
1、配置动态路由 所谓动态路由就是靠不同的点击,显示不同的路由地址 routes:[ //动态路径参数 以冒号开头 {path:'/user/:id',component:User} ] 2、在对应的页面 比如说点击列表,进入详情页面,在详情页面中 this.$route.params获取动态路由的值 ...
vue中的路由router
路由(router) 后端路由:所有的超链接都是URL地址,所有的URL地址都定义服务器上对应的资源 前端路由:对于单页面应用程序来说,通过URL中的hash值(#号)来实现不同页面之前的切换 hash有一个特点:http请求中不会包含hash相关的内容,所以,单页面应用程序中的页面跳转主要是用hash实现 路由的基本使用 引入文件(vue.js和vue-router.js) 创建路由对...
vue中实现倒计时功能
html部分 <span v-if="sendAuthCode" class="c-right" @click="getCode">获取验证码</span> <span v-if="!sendAuthCode" class="c-right"> <span class="auth_text_blue">{{auth_time}} </spa...
Vue 中, vue-resource实现路由拦截(权限)
Vue 中, vue-resource实现路由拦截(权限)需求描述问题解决方式问题具体解决过程 需求描述 在使用 Vue 做前端项目时,如果该用户尚未登录则将其重定向到登录页面进行登录,登录成功后才能浏览系统其他页面。 问题解决方式 Vue 路由功能与 vue-resource 的拦截功能进行结合,即可结局本问题 问题具体解决过程 import Vue from 'vue' import ...
实现wordpress路由功能
经过两天的正则表达式的学习,和研究wordpress的路由函数,成功实现了自定义wordpress路由功能,以下是路由规则的实现。rnrn如果有自定义的url参数,要通过路由传递,必须通过wordpress的函数将参数添加进去:rn[code=php]rn//add query_argsrnfunction add_query_vars($aVars) rn $aVars[] = 'score';rn $aVars[] = 'type'; // represents the name of the product category as shown in the URLrn return $aVars;rnrnadd_filter('query_vars', 'add_query_vars');//wordpress过滤器rn[/code]rnrn同时在获取参数的页面也要用到wordpress的函数获取:rn[code=php]$type=isset($wp_query->query_vars['type'])?urldecode($wp_query->query_vars['type']):'';[/code]rnrn[code=php]rn//路由规则-根据时间排序以及各类别的最新条目rnfunction add_rewrite_rules($aRules) rn $aNewRules = array(rn 'text/([^latest][^/]+)/?(/page/([0-9]+)?)?/?$' => 'index.php?cat=2&score=$matches[1]&paged=$matches[3]',rn 'image/([^latest][^/]+)/?(/page/([0-9]+)?)?/?$'=>'index.php?cat=3&score=$matches[1]&paged=$matches[3]',rn 'video/([^latest][^/]+)/?(/page/([0-9]+)?)?/?$'=>'index.php?cat=4&score=$matches[1]&paged=$matches[3]',rn 'resource/([^latest][^/]+)/?(/page/([0-9]+)?)?/?$'=>'index.php?cat=5&score=$matches[1]&paged=$matches[3]',rn 'text/(latest)/?(/page/([0-9]+)?)?/?$'=>'index.php?cat=2&type=$matches[1]&paged=$matches[3]',rn 'image/(latest)/?(/page/([0-9]+)?)?/?$'=>'index.php?cat=3&type=$matches[1]&paged=$matches[3]',rn 'video/(latest)/?(/page/([0-9]+)?)?/?$'=>'index.php?cat=4&type=$matches[1]&paged=$matches[3]',rn 'resource/(latest)/?$'=>'index.php?cat=5&type=$matches[1]',rn '(month)/?(/page/([0-9]+)?)?/?$'=>'index.php?score=$matches[1]&paged=$matches[3]',rn '(24hr)/?(/page/([0-9]+)?)?/?$'=>'index.php?score=$matches[1]&paged=$matches[3]',rn );rn $aRules = $aNewRules + $aRules;rn return $aRules;rnrnadd_filter('rewrite_rules_array', 'add_rewrite_rules');rn[/code]rnrn[code=php]rn//路由规则-类别rnadd_rewrite_rule('^text/?(/page/([0-9]+)?)?/?$','index.php?cat=2&paged=$matches[2]','top'); //http://www.ke6.com/text/ 段子对应的类别IDrnadd_rewrite_rule('^image/?(/page/([0-9]+)?)?/?$','index.php?cat=3&paged=$matches[2]','top'); //http://www.ke6.com/image/ 趣图对应的类别IDrnadd_rewrite_rule('^video/?(/page/([0-9]+)?)?/?$','index.php?cat=4&paged=$matches[2]','top'); //http://www.ke6.com/video/ 视频对应的类别IDrnadd_rewrite_rule('^resource/?(/page/([0-9]+)?)?/?$','index.php?cat=5&paged=$matches[2]','top'); //http://www.ke6.com/resource/ 视频对应的类别IDrn[/code]rnrn要实现的url路由效果如下:rnrn全部-24小时:http://www.domain.com/24hr/rn全部-7天:http://www.domain.com/rn全部-30天:http://www.domain.com/month/rn段子-24小时:http://www.domain.com/text/24hr/rn段子-7天:http://www.domain.com/text/rn段子-30天:http://www.domain.com/text/month/rnrn视频:videorn趣图:imagern干货:resourcern随机:randomrnrn最新鲜-全部:http://www.domain.com/latest/rn最新鲜-段子:http://www.domain.com/text/latest/rnrn本文链接:[url=http://www.tantengvip.com/2013/11/wordpress-route/]http://www.tantengvip.com/2013/11/wordpress-route/[/url]rnrn[size=14px]更多wordpress的二次开发请访问:rn[url=http://www.tantengvip.com/category/web/wordpress/]http://www.tantengvip.com/category/web/wordpress/[/url][/size]rn
linux2.4实现路由功能
如何用rh7.3实现路由功能???
实现基本的路由功能
本教程从基础的是应用ES2015/ES6新语法——开发Meteor&React;全栈应用,以基于Node..js实现的待做事项列表的全栈项目,React的特价推荐,综合应用 React &Redux;的作品展示,用React Native实现的社交媒体应用,应用Meteor实现的待做事项列表,应用Meteor配合React的玩家积分排行榜和URL书签管理系统七个大案例和应用各核心知识点的小案例组成。
相关热词 c# stream 复制 android c# c#监测窗口句柄 c# md5 引用 c# 判断tabtip 自己写个浏览器程序c# c# 字符串变成整数数组 c#语言编程写出一个方法 c# 转盘抽奖 c#选中treeview