Vue路由和Vue组合api

<template>
  <router-view></router-view>
  <router-link to="/">首页  </router-link>
  <router-link to="about">  关于我们</router-link>
  <router-link to="php">  PHP页面</router-link>
  <router-link to="user">  用户页面</router-link>
  <div>
    变量：{{name}}
    <hr>
    方法：<button @click="fun()"> 点击</button>
    <hr>
    点击计数：<button @click="fun2()">{{num}}</button>
  </div>
  <hr>
  <h4>引入组件，组件包含小组件</h4>
  <phpxiaojimu></phpxiaojimu>
</template>
<!--组合式Api-->
<script setup>
// reactive,ref 把数据转为响应式
import {reactive,ref} from "vue";
// 引入组件
import phpxiaojimu from './components/php.vue'
let name = '隔壁老王';
const fun =()=>{
  alert('点击了方法！')
};
let num = ref(0)
// 点击进行累加2方法
const fun2 = ()=>{
  console.log(num)
  num.value += 2;
}
// 使用组件：components
components :{
  phpxiaojimu
}
</script>
<style >
.red {
  color: red;
}
</style>

执行结果