Vue3——02路由跳转以及数据渲染的新写法

2023-10-20 16:02:00

Vue3——02路由跳转以及数据渲染的新写法

一、路由跳转的写法 useRouter

在Vue3中，路由跳转可以使用useRouter()方法来实现，该方法返回一个对象，其中包含许多用于路由管理的方法和属性，比如：

push()：将新的路由条目压入历史记录栈，并跳转到该路由。
replace()：将当前的路由条目替换为新的路由条目，不会在历史记录栈中创建新的条目。
go()：在历史记录栈中前进或后退指定数量的条目。
back()：在历史记录栈中后退一步。
forward()：在历史记录栈中前进一步。

以下是一个使用useRouter()方法进行路由跳转的示例：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    return {
      // 跳转到"/about"路由
      goToAbout() {
        router.push('/about');
      },

      // 将"/about"路由压入历史记录栈，但不会跳转到该路由
      pushAbout() {
        router.push({ name: 'about' });
      },

      // 在历史记录栈中前进一步
      goForward() {
        router.go(1);
      },

      // 在历史记录栈中后退一步
      goBack() {
        router.go(-1);
      },
    };
  },
};

二、引入element-ui支持Vue3的组件库

element-ui是一个非常流行的Vue组件库，它提供了许多常用的UI组件，如按钮、输入框、下拉列表等。在Vue3中，可以使用@element-plus/vue-components包来引入element-ui组件库。

以下是一个使用@element-plus/vue-components包引入element-ui组件库的示例：

import { createApp } from 'vue';
import ElementPlus from '@element-plus/vue-components';

const app = createApp(App);
app.use(ElementPlus);

app.mount('#app');

三、组件库的使用

在Vue3中，可以使用组件库中的组件就像使用普通的Vue组件一样。以下是一个使用element-ui组件库中的Button组件的示例：

<template>
  <el-button type="primary">Button</el-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ButtonExample',
  template: '<el-button type="primary">Button</el-button>',
});
</script>

四、SEO优化和PWA部署

Vue3是一个非常适合做SEO优化的框架，因为它可以生成静态页面，并且支持服务端渲染(SSR)。SSR可以将Vue应用程序渲染成HTML，然后在服务器上发送给客户端，从而提高网站的加载速度和SEO排名。

以下是一些Vue3 SEO优化的技巧：

使用语义化的HTML元素和CSS样式。
在head标签中添加必要的meta标签，如<title>, <meta name="description">, 和<meta name="keywords">.
使用路由别名来创建更友好的URL。
使用懒加载来减少初始页面加载时间。
使用服务端渲染(SSR)来提高网站的加载速度和SEO排名。

以下是一些Vue3 PWA部署的技巧：