欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式

 更新時間：2023年10月23日 09:08:31   作者：qq_41387775  
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

根據(jù)官網(wǎng)代碼搭建router遇到了很多問題

 html

是指用于HTML文件里的

javascript

卸載js文件里

Vue-cli項目中使用router

1.創(chuàng)建router.js文件

在router.js文件里創(chuàng)建路由， views文件加下面存放路由跳轉(zhuǎn)的頁面。

遇到的一些語法問題： export 導(dǎo)出的屬性import時需要用花括號， export default 不需要花括號, 如下方的createWebHistory放在花括號里才能用

// 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>

2.main.ts文件創(chuàng)建app時安裝路由插件

這是vue3的用法，use安裝插件時跟在createApp創(chuàng)建的實例后面

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

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

3.vue頁面應(yīng)用組件

// 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)路由

1.配置動態(tài)路由

router/index.js文件里設(shè)置路由時，路徑后面加/:id,組件可以通過id獲取，id可以取為任何名字

2.動態(tài)頁面接收路由中的參數(shù)動態(tài)渲染

可以通過watch監(jiān)聽this.$router中的params的變化，也可以通過路由守衛(wèi)beforeRouteUpdate接收路由數(shù)據(jù)，但是這里遇到了一個問題，就是第一次跳轉(zhuǎn)的時候，沒有的watch和beforeRouteUpdate里面，目前不知道為啥

// 動態(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)，進不到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>

3.動態(tài)路由跳轉(zhuǎn)操作頁面

// 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主頁面

主頁面中使用組件

即main.ts創(chuàng)建的vue實例的頁面，是整個應(yīng)用的起始頁面

// 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>

遇到的一些問題

1.router-link, router-view未注冊

這是因為在main.ts里面沒有正確注冊router插件

2.找不到路由定義的路徑

因為router/index.js里面import的組件路徑不正確

3.控制臺報錯

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”

這是因為組件沒有編譯，vue-cli創(chuàng)建的項目在vue.config.js文件里加上一個配置屬性

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

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論