vue路由守卫——改页面title

最新推荐文章于 2024-09-24 21:49:19 发布

原创最新推荐文章于 2024-09-24 21:49:19 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了使用Vue.js进行页面路由跳转的方法，包括在index.vue和login.vue组件中通过点击按钮触发路由跳转到登录页和首页的功能实现。同时展示了如何在main.js中配置Vue路由器，并在router/index.js中定义了首页和登录页的路由规则。

index.vue

<button @click="goLogin">跳登录页</button>

goLogin: function () {
  this.$router.push('/Login') // 路由跳转
}

login.vue

<button @click="goHome">跳首页</button>
goHome: function () {
  this.$router.push('/') // 路由跳转
}

app.vue

<router-view></router-view>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Login from '@/pages/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login,
      meta: {
        title: '登录页'
      }
    }
  ]
})

main.js

import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router.beforeEach((to, from, next) => { // 路由守卫
  document.title = to.matched[0].meta.title // 改标签
  next() // 必写
})