vue-router各个属性的作用及用法

vue-router是vue单页面开发的路由,就是决定页面跳转的!

<router-link>

<router-link> 组件支持用户在具体有路由功能的应用中(点击)导航。通过to属性指定目标地址。

Props 属性

. to

表示目标路由的链接。当被点击后,内部会立刻把to的值传到router-push()。

用法:

<!--字符串-->
<router-link to="home">Home<router-link>
<!--渲染成-->
<a href="home">Home</a>

<!--使用v-bind的js表达式-->
<router-link v-bind:to="‘home‘">Home</router-link>
<!--或者-->
<router-link :to="‘home‘">Home</router-link>

<router-link :to="{ path: ‘home‘ }">Home</router-link>

<!--命名路由-->
<router-link :to="{ name: ‘user‘, params: {userId: 123} }">Home</router-link>

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

. replace

设置replace属性的话,当点击时,会调用roter.replace()而不是router.push(),所以导航后不会留下history记录,也就是不能回退到上一个页面

<router-link :to="{path: ‘/abc‘}" replace>ABC</router-link>

. append

设置append属性后,则在当前路径前添加基路径,例如,我们从/a导航到一个相对路径b,如果没有配置append,则路径为/b,如果配了,则为/a/b

<router-link to="b" append>Home</router-link>

. tag

有时候想要<router-link>渲染成某种标签,例如<li>。于是我们使用tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

<router-link to="/foo" tag="li">FOO</router-link>
<!-- 渲染结果 -->
<li>FOO</li>

. active-class

设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置, 默认值为 ‘router-link-active‘

export default New Router({
   linkActiveClass: ‘active‘
})

. exact

"是否激活",默认是false 。举个粟子,如果当前的路径是/a 开头的,那么<router-link to="/a"> 也会被设置css类名

按照这个规则,<router-link to="/"> 将会点亮各个路由!想要链接使用"exact匹配模式",则使用exact属性:

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact>Home</router-link>
<router-link to="/user">USER</router-link>

<router-link to="/user/userinfo">USER-info</router-link>

// 如果不设置exact,则当路由到了/user/userinfo 页面时,USER也是被设置了router-link-active样式的!

.events

声明可以用来触发导航的事件(默认是‘click‘)。可以是一个字符串或者是一个包含字符串的数组

将"激活时的css类名"应用在外层元素

有时候我们要让"激活的css类名"应用在外层元素,而不是<a>标签本身,那么可以用<router-link>渲染外层元素,包裹着内层的原生<a>标签

<router-link tag="li" to="/foo">
    <a>/foo</a>
</router-link>

在这种情况下,<a>将作为真实的链接(能获取到正确的href的),而"激活时的css类名"则设置到外层的<li>

方法

router-link默认是触发router.push(location),如果设置的replace 则触发router.replace(location)

这有啥区别呢?

router.push() :导航跑到不同的URL,这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的url.

router.replace(): 跟router.push作用是一样的,但是,它不会向history添加新记录,而是跟它的方法名一样替换掉当前的history记录.

router.go(n): 这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.Go(n)

时间: 2024-09-30 01:47:41

vue-router各个属性的作用及用法的相关文章

vue项目使用keep-alive的作用

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了. keep-alive 简介 keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染.用法也很简单: <keep-alive> <component> <!-- 该组件将被缓存! --

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

javascript的outerHTML属性的作用

javascript的outerHTML属性的作用:此属性可以设置或者获取指定元素内所有的文本内容.html和元素本身.可以结合innerHTML属性一起学习,从名称上就要就能够很容的分辨他们的用法,innerHTML属性可以获取一个元素内部的html内容和文本,那么outerHTML属性获取的更要宽泛一些,不但可以获取html内容和文本吗,而且可以获取元素本身.代码如下: <!DOCTYPE html> <html> <head> <meta charset=&

typeof的作用及用法

typeof的作用及用法 1.检查一个变量是否存在,是否有值. typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候.例如: 1. alert(typeof undeclaredVariable === "undefined");    // true 2. var declaredVariable; alert(typeof declaredVariable);    // 'undefined'

JSP九大内置对象的作用和用法总结【转】

JSP九大内置对象的作用和用法总结? JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 1.request对象javax.servlet.http.HttpServletRequest request对象代表了客户端的请求信息,主要用于接受通过HTTP协议传送到服务器的数据.(包括头信息.系统信息.请求方式以及请求参数等).request对 象的作用域

vue自定义指令clickoutside使用以及扩展用法

vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如要求选择器的弹出框中,增加搜索过滤(跟目前element的输入建议不太一样).于是想说说之前修改element组件,并定制为业务组件过程中遇到的问题. ps:因为对某些组件改动很大,所以是直接拷贝了一份源码,然后再进行修改,但是这样会遇到挺多问题,建议对于vue组件如果改动不大,只是简单功能扩展,就

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

Vue Router 使用方法

安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指向在 NPM 发布的最新版本. 你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js 这样指定 版本号 或者 Tag. 在 Vue 后面加载 vue-router,它会自动安装的: <script src="/path/to

04 Vue Router路由管理器

路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. Vue Router包含的功能有: 支持HTML5 历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 vue-router的基本使用 基本使用步骤 1.引入相关的库文件 导入vue文件为全局window对象挂载Vue构造函数