Vue-Router API详解

2019-08-11  本文已影响0人  A郑家庆

<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构建选项

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环境)
可选值：

base
上一篇下一篇

猜你喜欢

热点阅读