vue 如何添加全局函数或全局变量以及单页面的title设置总结

根据您的需求，我会详细讲解“Vue 如何添加全局函数或全局变量以及单页面的 title 设置总结”的完整攻略，包含两个示例用于进一步说明。

一、Vue 如何添加全局函数或全局变量

在 Vue 中，我们可以方便地在全局使用自定义函数和变量，这样可以简化业务逻辑，提高开发效率。以下是实现此功能的方法：

1.1 添加全局函数

在 Vue 中添加全局函数的方式是通过在 Vue 的原型上添加方法来实现。具体步骤如下：

1.在 main.js 中定义全局函数

Vue.prototype.$myFunction = function() {
  console.log("This is my global function.");
}

以上代码添加了一个全局函数 $myFunction，函数内容为打印字符串 "This is my global function."。

2.在组件中调用全局函数

<template>
  <div>
    <button v-on:click="myClick()">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    myClick() {
      this.$myFunction(); // 调用全局函数
    }
  }
}
</script>

这里我们在组件 MyComponent 中的按钮点击事件中，调用了 $myFunction 函数。

1.2 添加全局变量

添加全局变量和添加全局函数基本类似，只需要在 Vue 的原型上添加一个属性即可。具体步骤如下：

1.在 main.js 中定义全局变量

Vue.prototype.$myVariable = 'This is my global variable.';

以上代码添加了一个全局变量 $myVariable，变量内容为字符串 "This is my global variable."。

2.在组件中使用全局变量

<template>
  <div>
    <p>{{ $myVariable }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  created() {
    console.log(this.$myVariable); // 打印全局变量
  }
}
</script>

这里我们在组件 MyComponent 中使用了 $myVariable 全局变量，在组件创建时打印了此变量。

二、单页面的 title 设置总结

在开发单页面应用程序时，我们通常需要使用路由来管理不同页面的跳转。此时，我们也需要设置每个页面的 title，以便浏览器正确地显示页面的标题。以下是实现此功能的方法：

2.1 在路由中设置 title

可以在路由配置文件中设置 title，如下所示：

const routes = [
  {
    path: '/',
    component: HomePage,
    meta: {
      title: 'HomePage - My Site' // 设置 title
    }
  },
  {
    path: '/about',
    component: AboutPage,
    meta: {
      title: 'AboutPage - My Site' // 设置 title
    }
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  document.title = to.meta.title; // 在 before 钩子中设置 title
  next();
});

以上代码定义了两个路由，分别是 / 和 /about，并在路由配置中添加了 meta 字段来设置 title。在路由的 beforeEach 钩子中，获取当前路由的 title 并设置给 document.title。

2.2 在组件中设置 title

也可以在组件中使用 mounted 钩子设置 title，如下所示：

<template>
  <div>
    <h1>About us</h1>
  </div>
</template>

<script>
export default {
  name: 'AboutPage',
  mounted() {
    document.title = 'About us - My Site'; // 在 mounted 钩子中设置 title
  }
}
</script>

以上代码中，在 AboutPage 组件中的 mounted 钩子中，设置了 title 字符串 About us - My Site。

以上就是 Vue 添加全局函数或全局变量以及单页面的 title 设置总结的完整攻略，希望对您有所帮助。