vue 4 跳轉路由

1. router-link標籤跳轉

關於使用者

2. 使用**跳轉

飛走

3. 動態路由，路由跳轉時，路由條目後跟動態引數

index.js中路由條目：

使用時：

增加需求：如想在跳轉使用者介面是，.vue中拿到並顯示使用者名稱

user.vue模板中：

注：this.$router 表示獲取index.js中到處的router物件

this.$route表示獲取當前活躍的路由，params是其中的引數，userid表示路由條目中定義的動態引數名

user 內容

4. 路由的懶載入： 用到時再載入

1. 使用這種方法匯入的路由模板，在打包時會將不同的路由資訊打包到不同的js檔案中，而不是同乙個js中，這樣在匯入路由時，就不會一次性全部載入。

2. **層面上看，就是在使用某個路由條目時，才會使用某個模板物件（home, about, user）,該物件才會將某個路由模板匯入

import vuerouter from "vue-router";

import vue from "vue";
import home from "../components/home";

// import home from "@/components/home";

// import about from "@/components/about";
// import user from "@/components/user";
// 路由的懶載入
const home = () => import("@/components/home");
const about = () => import("@/components/about");
const user = () => import("@/components/user");
vue.use(vuerouter);
const routes =[,,
,]const router = new
vuerouter()
export 
default router

vue跳轉路由

1.router link 1 不帶引數 name,path都行,建議用name 2 帶引數 params傳引數 類似post 路由配置 path home id 或者 path home id 不配置path 第一次可請求,重新整理頁面id會消失 配置path,重新整理頁面id會保留 html 取...

vue 4 計算屬性 監聽屬性

div newvue script 例項 1中模板變的很複雜起來，也不容易看懂理解。接下來我們看看使用了計算屬性的例項 原始字串 p 計算後反轉字串 p div var vm newvue computed script computed 與 methods 我們可以使用 methods 來替代 c...

VUE 4 配置axios發起請求

1.前端請求後端介面進行資料互動的時候，需要配置axios 2.匯入axios包,main.js import axios from axios 3.掛載到原型配置上，便於所有的元件都可以訪問this.http 掛載全域性物件 4.設定axios 請求的根路徑 配置後端api介面路徑 axios.d...