<router-link>组件支持用户在具有路由功能的应用中点击导航，通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。
<router-link>Props
to
表示目标路由的链接。当被点击后，内部会立刻把to的值传到router.push()，这也是为什么声明式导航和编程式导航效果是一样的原因。
repalce
设置replace属性的话，当点击时会调用router.replace()而不是router.push()，于是导航后不会留下history记录。
<router-link :to="{path: '/abc'}" replace></router-link>
append
设置append属性后，则在当前(相对)路径前添加基路径。例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配了，则为/a/b
<router-link :to="{ path: '/b' }" append></router-link>
tag
默认值为a，有时候想要<router-link>渲染成某种标签，例如<li>。于是我们使用tag prop类指定何种标签，同样它还是会监听点击，触发导航。
exact-active-class
默认值：router-link-exact-active
配置当链接精确匹配的时候应该激活的class。注意默认值也是通过路由也是可以通过路由构造函数选项linkExactActiveClass进行全局配置的。
背景
当我们在点击导航栏时，选中的节点需要给它添加一个样式，比如有下划线并且是红色的，之前我的做法：
<template>
<section>
<ul>
<li
v-for="(item, index) in navList"
:key="index"
@click="chooseItem(index)"
:class="{active: lastIndex===index}">{{item.name}}</li>
</ul>
<router-view></router-view>
</section>
</template>
<script>
export default {
data () {
return {
navList: [
{ name: '首页',router: '/' },
{ name: '错误', router: '/error' },
{ name: '登录', router: '/login' }
],
lastIndex: 0
}
},
methods: {
chooseItem (index) {
this.lastIndex = index
this.$router.push({path: this.navList[index].router})
}
}
}
</script>
<style>
li {
list-style: none;
display: inline-block;
margin-right: 10px;
}
.active {
border-bottom: 1px solid red;
}
</style>
// 路由
const routes = new VueRouter({
{
path: '/',
component: 'home/index',
label: '首页',
children: [
{
path: 'login',
component: 'default/login'
},
{
path: 'error',
component: 'default/error'
}
]
}
})
image.png
我自己需要人为的根据点击导航栏的元素变化而去控制样式的变化，从而达到选中样式的切换目的。
弊端：如果一个项目中有很多导航栏那么就需要写大量的代码，而且需要统一，更重要的是如果刷新页面，样式就会初始化，比如我选择错误，下面会有红线，但是我刷新页面又变成首页有红线，这样子还要写其他代码去控制样式。
而现在我们不需要那么麻烦，只需要根据匹配的路由就可以实现选中样式的切换，而且在整个项目中都可以实现统一，刷新页面样式不会初始化还是会根据匹配的路由显示对应的样式。
<template>
<section>
<router-link
v-for="(item, index) in navList"
:key="index"
:to="item.router"
exact-active-class="active">
{{item.name}}
</router-link>
<router-view></router-view>
</section>
</template>
<script>
export default {
data () {
return {
navList: [
{ name: '首页',router: '/' },
{ name: '错误', router: '/error' },
{ name: '登录', router: '/login' }
]
}
}
}
</script>
<style>
.active {
text-decoration: none;
border-bottom: 1px solid red;
}
</style>
// 路由
同上
image.png
从上述两种方式实现导航栏选中样式，我们可以明显感觉到后者实现要方便的多，不仅自己不需要手动配置而且刷新页面也不会初始化。
active-class
默认值是router-link-active，设置链接激活时使用的CSS类名。默认值可以通过路由的构造选项linkActiveClass来全局配置。
背景
这个跟exact-active-class作用类似，只不过前者是模糊匹配，后者是精确匹配。比如页面路由如果是/a，那么<router-link to="/">和<router-link to="/a">都可以被匹配到。这两者都是用于tab栏切换。
event
目前在<router-link>标签上添加click事件是不会被触发，因为<router-link>标签本身会被解析成a标签，所以这里一般需要添加事件修饰符<router-link @click.native="changeStyle">
<router-view>
<router-view>组件是一个functional组件，渲染匹配到的视图组件，<router-view>渲染的组件还可以内嵌自己的<router-view>，根据嵌套路径，渲染嵌套组件。因为它也是个组件，所以可以配合<transition>和<keep-alive>使用。如果两个结合一起用，要确保在内层使用<kee-alive>
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
<router-view>Props
name
默认值：default
如果<router-view>设置了名称，则会渲染对应的路由配置中components下的相应组件。
Router构建选项
- 类型：Array<RouteConfig>
RouteConfig的类型定义：
declare type RouteConfig = {
path: string;
component: component;
name: string; // 命名路由
components: { [name: string]: component };
redirect: string | location | function;
props: boolean | object | function;
alias: string | array;
children: array;
beforeEnter: (to: route, from: route, next: function) => void;
meta: any;
caseSensitive: boolean; // 匹配规则是否大小写敏感(默认值false)
pathToRegexpOptions: object; // 编译正则的选项
}
mode
默认值：hash(浏览器环境) | abstract(node.js环境)
可选值：
- hash：使用URL hash值来作路由。支持所有浏览器。
- history：依赖HTML5 History API和服务器配置。
- abstract：支持所有js运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。
base
- 默认值：'/'
应用的基路径。例如，如果整个单页面应用服务在/app/下，然后base就应该设为'/app/'。
网友评论