vue.js路由跳转详解

2024-12-19 02:43:26

本文为大家分享了vue.js路由的跳转，供大家参考，具体内容如下

1、路由demo示例

 <div id="app">
  <h1>Hello App!</h1>
  <p>
  <!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
 </div>

2、路由的跳转

router-link是一个组件，默认被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：被选中的router-link将自动添加一个class属性值 .router-link-active

1）、router-link的to属性

这是一个必须设置的属性，否则路由无法生效。它表示路由的链接，可以是一个字符串也可以是一个描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>

<!-- 渲染结果同上  使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 渲染结果同上  不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 渲染结果同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 此时路由如下定义，name也可为中文
const routes = [
 { path: '/user', component: user, name: 'user' }
];

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

这里如果是简单的路由跳转，可以写成to也是可以是：to 或者是v-bind：to

2、replace

一个布尔类型，默认为false。如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。

<router-link to="goods" replace></router-link>

3、tag

router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。

<!-- 渲染成li标签 -->
<router-link to="goods" tag="li"></router-link>

4、active-class

上面说了被选中的router-link将自动添加一个class属性值.router-link-active，这个属性就是来修改这个class值的。

<!-- 改变router-link的active时的classname -->
<router-link to="goods" active-class="router-active'></router-link>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js路由组件vue-router使用方法详解

使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod
Vue.js 单页面多路由区域操作的实例详解

单页面多路由区域操作在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r
Vue.js如何实现路由懒加载浅析

前言懒加载也就是延迟加载,不知道大家在工作中有没有发现,当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间.幸运的是:vue-router支持WebPack内置的异步模块加载系统.所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载.话不多说了,来一起看看详细的实现过程: 使用假设你的路由配置是这样的: import MainPage from './routes/MainPage.vue' i
Vue.js：使用Vue-Router 2实现路由功能介绍

注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能. 推荐使用npm安装. npm install vue-router 一.使用路由在main.js中,需要明确安装路由功能: import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) //1.定义组件,这里使用从其他
Vue.js路由vue-router使用方法详解

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w
详解Vue.js搭建路由报错 router.map is not a function

错误: 出现问题原因:2.0已经没有map这个方法了,只有1.0兼容该方法. 解决方法: (1)方法1:使用命令npm install vue-router@0.7.13兼容1.0版本vue. 在代码中的使用方法: (2)解决方法2:基于vue2.0,写对应的方法. 具体用法如下图: 注:1.0和2.0在一些用法上有比较大的差别,用的时候需要注意. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
Vue.js框架路由使用方法实例详解

Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-
vue.js路由跳转详解

本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下 1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p>    <rout
Vue.js的模板语法详解

Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 使用"Mustache"语法 (即用双大括号包裹) 的文本插值: <span>Message: {{ msg }}</span>
Vue.js $refs用法案例详解

尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件.为此可以使用 ref 为子组件指定一个引用 ID. ref 为子组件指定一个引用 ID,使父组件能通过 ref 直接访问子组件中的数据通过 this.$refs.outsideComponentRef 能直接定位到 ref="outsideComponentRef" 的上,并返回该实例化对象一.ref使用在外面的组件上 <div id="app"> <comp
Vue.js directive自定义指令详解

自定义一个demo指令 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数. <div id="app">  <input type="text" v-focus/> </div> <script> // 注册一个全局自定义指令
vue.js中指令Directives详解

想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令
react-router v4如何使用history控制路由跳转详解

前言距离React Router v4 正式发布也已经挺久了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的
webpack+vue.js实现组件化详解

简介在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |
Vue.js学习之过滤器详解

前言在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper
Vue.js render方法使用详解

前注: 版本限制: Vue.js 2.0+ 1.0无法使用没耐心,只关心有什么用的,想知道其大概是获取什么东西后生成的,可以直接看结尾的总结非使用render方法的情况完整代码: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js">&
基于vue.js的分页插件详解

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.想了解更多,请戳http://cn.vuejs.org/ html代码: <div class="page-bar" v-else> <ul> <li style="width: 11%" v-if="showFirst"> <a v-on:click="cur--"> <<</

vue.js路由跳转详解

相关推荐

随机推荐