vue路由中prop：【tag、replace、active-class】

vue-route跳转方法有两种，第一种方法是使用内置的<router-link>组件，它会被渲染成一个 a 标签

<template >

<div>

<h1>首页</h1>

<router-link to="/about>跳转到about</router-link>

</template>

　它的用法与一般的组件一样，to是一个prop，指定需要跳转的路径，当然也可以用v-bind动态设置。使用<router-link>在HTML5的History模式下会被拦截点击，避免浏览器重新加载页面。

<router-link>还有一些其他的prop，常用的有：

·tag:

　　tag 可以指定渲染成什么标签,比如<router-link to="/about" tag="li">;渲染的结果及时li标签,而不是a标签.
·replace:
　　使用replace不会留下History记录,所以导航后不能使用后退键返回上一个页面,如 <router-link to="/about" replace>

　　有时候跳转页面可能会在JavaScript里进行,类似于window.location.href,这时候可以用第二种跳转方法,使用router实例的方法.比如在 about.vue里,通过点击事件跳转:

//about.Vue

<<template>

<div>

<h1>介绍页</h1>

<button @click="handleRouter">跳转到user页面</button>

</div>

</template>

<script>

export default{

methods:{

handleRouter(){

this.$route.push('/user/123')

}

</script>

$route还有一些其他的方法：
·replace:
　　类似于<router-link>的replace功能，它不会向History添加新的记录，而是替换点。如：this.$route.replace('/user/123')

·active-class:
　　当<router-link>对应的路由匹配成功时，会自动给当前的元素设置一个名为route-link-active的class，设置prop：active-class可以修改默认的名称，【类似导航栏时可以用】
·go
　　类似于window.location.go(),在History向前或者后退多少步，参数是整数，如：
　　//后退1步
　　this.$route.go(-1);
　　//前进2步
　　this.$route.go(2)

来源：https://blog.csdn.net/weixin_43837268/article/details/100669396

标签

路由

科学

replace