Vue Vue-route （2）-优快云博客

本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/149052597

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue-route重定向和声明式导航

Vue-route路由

重定向

首页默认访问

希望访问网站域名时，直接访问film组件。

在router/index.js中配置根路径默认组件.

示例如下：

// 配置表
const routes = [
  {
    path: '/filems',
    name: 'filems',
    component: Films
  },
  {
    path: '/cinemas',
    name: 'cinemas',
    component: Cinemas
  },
  {
    path: '/center',
    name: 'center',
    component: Center
  },
  {
    path: '/',
    name: 'films',
    component: Films
  }
]

不存在匹配

当输入不存在的路径时，匹配所有路径。

示例如下：

{
    path: '/',
    name: 'films',
    component: Films
  },
  {
    path: '*',
    component: Films
  }

按照从上到下的顺序进行匹配。

声明式导航

监听路由改变，来实现导航高亮。

路由原理

1.hash路由 location.hash 切换

window.onhashchange 监听路径的切换

2.history路由 hostory.pushState 切换

window.onpopstate 监听路径的切换

使用示例

使用router-link替换原来的a标签来实现跳转；

并给跳转后的路径设置样式。

点击后，当前路由上自动加上类。

示例如下：

<template>
  <div>
    <ul>
      <li>
        <router-link to="films">电影</router-link>
      </li>
      <li>
        <router-link to="cinemas">影院</router-link>
      </li>
      <li>
        <router-link to="center">我的</router-link>
      </li>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.router-link-active {
  color: red;
}
</style>

效果：

自定义class类

可以在router-link上自定义class类，在渲染后也可以应用上。

示例如下：

<template>
  <div>
    <ul>
      <li>
        <router-link to="films" active-class="testActive">电影</router-link>
      </li>
      <li>
        <router-link to="cinemas">影院</router-link>
      </li>
      <li>
        <router-link to="center">我的</router-link>
      </li>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.router-link-active {
  color: red;
}
.testActive {
  font-size:20px;
}
</style>

Tag设置

Tag设置渲染元素，不设置默认渲染为a标签。

示例如下：

<template>
  <div>
    <ul>
      <!-- 声明式导航 （3之前 包含3） -->
      <li>
        <router-link to="films" active-class="testActive" tag="li">电影</router-link>
      </li>
      <li>
        <router-link to="cinemas">影院</router-link>
      </li>
      <li>
        <router-link to="center">我的</router-link>
      </li>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>

版本4路由

改变

4之后这个语法就不好用了，需要修改为：

示例

把原来的导航改为版本4的导航。

示例如下：

<!-- 版本4 导航 -->
    <ul>
        <router-link to="films" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'testActive':''">电影</li>
        </router-link>
        <router-link to="cinemas" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'testActive':''">影院</li>
        </router-link>
        <router-link to="center" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'testActive':''">我的</li>
        </router-link>
    </ul>