如何获取Vue.js中当前激活的路由？

Question

我有一个简单的 Vue-app:

App.vue:

<template>
  <v-app>
    <v-navigation-drawer
      app
      v-model="drawer"
      :mini-variant.sync="mini"
      permanent
      color="secondary"
      dark
    >
      <v-list-item class="px-2 user-block">
        <v-list-item-avatar>
          <div class="avatar">JL</div>
        </v-list-item-avatar>

        <v-list-item-title>John Leider</v-list-item-title>

        <v-btn icon @click.stop="mini = !mini">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item
          v-for="item in items"
          :key="item.title"
          :href="item.link"
          @click.stop="title = item.title"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar app light>
      <div class="d-flex align-center">IFRS 9: {{ title }}</div>

      <v-spacer></v-spacer>
    </v-app-bar>

    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue'
import router from './router'

export default Vue.extend({
  name: 'App',

  created() {
    const currentPath = router.currentRoute.path
    const activeItem = this.items.find((m) => m.link === currentPath)
    console.log(activeItem?.title)
    this.title = activeItem ? activeItem.title : 'Home'
  },

  data: () => ({
    drawer: true,
    items: [
      { title: 'Home', icon: 'mdi-home', link: '/' },
      { title: 'About', icon: 'mdi-help', link: '/about' },
    ],
    mini: true,
    title: '',
  }),
})
</script>

<style lang="sass">
@import '~vuetify/src/styles/settings/_variables'

.avatar
  background-color: #FFFFFF
  color: #6D2077
  font-weight: bold
  width: 48px
  height: 48px
  line-height: 48px

.user-block
  height: 64px

@media #{map-get($display-breakpoints, 'sm-and-down')}
  .user-block
    height: 56px
</style>

router/index.ts:

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

在此代码的上方，我尝试根据当前路由路径更改 title 值，但它始终打印 'Home'.

我做错了什么？

P.S. 我是 Vue.

的菜鸟

Answer 1

因为此代码在 App.vue 中，最高级别的组件，所以您不应在 created 生命周期挂钩上设置标题。相反，您应该考虑设置一个 'watcher' 来监视 $route 值。例如：

export default Vue.extend({
  name: "App",
  //...
  watch: {
    $route(newRouteValue) {
      console.log(newRouteValue); // {name: "About", meta: {…}, path: "/about", hash: "", query: {…}, …}
    },
  },
});

使用此代码，每当用户导航到您的网络应用程序的不同页面时，标题都可以适当更新。

以下是观察者的官方文档：https://vuejs.org/v2/guide/computed.html#Watchers

如何获取Vue.js中当前激活的路由？

How to get the current active route in Vue.js?

typescript

vue.js

vue-router

vuejs2