// router/index
import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/home.vue";
import About from "../views/about.vue";
import dynamicPage from "../views/dynamicHome.vue"

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  {
    path: "/dynamicPage/:id",
    name: "dynamicPage",
    component: dynamicPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

// view/home.vue
<template>
  <div class="home">這是首頁首頁</div>
</template>

// view/about
<template>
  <div class="home">這是詳情頁</div>
</template>

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"

createApp(App).use(router).mount("#app")

// singleRouter
<template>
  <div class="single-router">
    <h3>路由跳轉(zhuǎn)</h3>
    <button @click="gotoAbout">go to About</button>
    <div>
      <router-link to="/">首頁</router-link> |
      <router-link to="/about">關(guān)于</router-link>
    </div>
    <h4>路由內(nèi)容</h4>
    <router-view />
    <h4>結(jié)束</h4>
  </div>
</template>

<script>
export default {
  name: "singleRouter",
  components: {},
  setup() {},
  methods: {
    gotoAbout() {
      const router = this.$router;
      router.push("/about");
      return {};
    },
  },
};

</script>
<style scoped>
.single-router {
  background-color: #cccccc;
}
</style>

// 動態(tài)路由指向的頁面，通過接受路由中的數(shù)據(jù)動態(tài)渲染
<template>
  <div class="home">pages: {{ page }}</div>
</template>

<script lang="ts">
import { ref } from "vue";

export default {
  name: "dynamicHome",
  components: {},

  // problems: 第一次路由跳轉(zhuǎn)，進(jìn)不到watch和路由守衛(wèi)里面

  // created() {
  //   this.$watch(
  //     () => this.$route.params,
  //     (toParams, previousParams) => {
  //       console.log(toParams, previousParams);
  //       this.page = toParams.id;
  //     }
  //   );
  // },
  // 路由導(dǎo)航守衛(wèi)，
  beforeRouteUpdate(to, from) {
    console.log(to, from);
    this.page = to.params.id;
  },
  setup() {
    const page = "未定義";
    return {
      page,
    };
  },
  computed: {},
  methods: {},
};
</script>

<style scoped>
.home {
  color: #ffee05;
}
</style>

// dymamicRouter.vue
<!-- 動態(tài)路由跳轉(zhuǎn) -->
<template>
  <div class="single-router">
    <h3>動態(tài)路由跳轉(zhuǎn)</h3>
    <button @click="gotoAbout('about')">go to About</button>
    <button @click="gotoAbout('home')">go to Home</button>
    <div>
      <router-link to="/dynamicPage/:id=home">首頁</router-link> |
      <router-link to="/dynamicPage/:id=about">關(guān)于</router-link>
    </div>
    <h4>路由內(nèi)容</h4>
    <router-view />
    <h4>結(jié)束</h4>
  </div>
</template>

<script>
export default {
  name: "singleRouter",
  components: {},
  setup() {},
  methods: {
    gotoAbout(val) {
      const router = this.$router;
      router.push(`/dynamicPage/:id=${val}`);
      return {};
    },
  },
};
</script>

<style scoped>
.single-router {
  background-color: #cccccc;
}
</style>

// App.vue
<template>
  <h3>單頁面路由</h3>
  <single-router></single-router>
  <h3>動態(tài)路由</h3>
  <dynamic-router></dynamic-router>
</template>

<script lang="ts">
import { ref } from "vue";
import singleRouter from "./components/singleRouter.vue";
import dynamicRouter from "./components/dynamicRouter.vue";

export default {
  name: "App",
  components: {
    singleRouter,
    dynamicRouter,
  },
  setup() {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  ...// 其他配置
  runtimeCompiler: true,  // 運(yùn)行時編譯
});