vue 路由基礎

mingde 發布于2019-08-23 18:09 / 3131人閱讀

摘要：路由基礎使用插件處理路由，路由是開發單頁應用必須掌握的知識。什么是是官方提供前端路由插件，借助它我們實現可以基于路由和組件的單頁面應用。子路由前面不能有。命名路由路由對象中的屬性是路由的名字，可用該名字指定路徑。

vue 路由基礎

vue 使用 vue-router 插件處理路由，路由是開發單頁應用必須掌握的知識。

什么是 vue-router？

（1）vue-router 是 Vue 官方提供前端路由插件，借助它我們實現可以基于路由和組件的單頁面應用。

（2）它與傳統的頁面區別在于：

傳統的頁面應用采用的是后端路由，即通過超鏈接來實現頁面切換和跳轉的。

而在 vue-router 單頁面應用中，則是通過路徑之間的切換（實際上就是組件的切換）。

router-link 和 router-view 組件

router-link 是一個a（鏈接）標簽的封裝，router-view 是路由視圖，渲染 router-link 匹配到的組件，可配合使用和使用。

更多詳細信息

路由配置 動態路由

$route 是當前路由，可用 watch在組件中監它的變化，有一個 params 屬性，值一個包含動態路由的對象。

watch: {
  "$route"(to) {
     console.log(to);
     //將路由的 params 屬性賦值給組件的 data 屬性
     to.params && to.params.view && (this.effect = to.params.view)
    },
}

route 和 router 的區別

路由對象為：

{
    path:"/argu/:name",
    // 使用 import 動態引入路徑對應的組件，起到懶加載的作用
    component:()=>import("@/views/ArguPage")
}

可在該路由的組件中這樣獲取name的值：

$route.params.name //給同一個組件設置傳遞不同的params，實現組件的復用

嵌套路由

在路由對象中添加一個 children 屬性，值是一個數組，可包含多個子路由。子路由 path 前面不能有 / 。父級路由對應的組件必須有路由出口，即 router-view。

命名路由

路由對象中的 name 屬性是路由的名字，可用該名字指定路徑。
在 router-link 的 to 屬性動態綁定 路由對象。

命名視圖

route-view 是路由視圖，只有一個視圖時，路由匹配的組件在該視圖中渲染，多個視圖則要對視圖進行命名。

路由對象：

{
    path:"/name/view",
    name:"name_view",
    // 注意命名視圖的 components 和 組件的 component 的區別
    components:{
        // 不給 router-view 設置 name 屬性，name 值就是 default
        default:()=>import("@/views/ChildPage"),
        sister:()=>import("@/views/SisterPage"),
        brother:()=>import("@/views/BrotherPage"),
    }
}

JS 操作路由

路由對象 $router 有多個函數push 、 go 、 replace

push 可導航到不同的頁面，會將該路徑進入歷史記錄。
$router.push 和 window.history.pushSate 一樣。
push 可接受不同的參數：

//字符串路徑
this.$router.push("home")

// 路由對象
this.$router.push({path:"home"})

// 命名路由加參數
this.$router.push({name:"argu",params:{name:"jack"}})
//  path 路由和 query
this.$router.push({path:"argu",query:{name:"jack"}});
//  path  和 params 不可一起使用，params 會被忽略
this.$router.push({path:"argu",params:{name:"jack"}});
this.$router.push({name:"argu",query:{name:"jack"}});

go 的參數是一個整數，表示回退或者前進多少歷史記錄。

// 在瀏覽器記錄中前進一步，等同于 history.forward()
$router.go(1)

// 后退一步記錄，等同于 history.back()
$router.go(-1)

// 前進 3 步記錄
$router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
$router.go(-100)
$router.go(100)

router.replace(location) = window.history.replaceState
跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄

使用場景：不需要用戶回退的情況，比如權限驗證。

// 路由名字
this.$router.replace("name_view");
// 字符串路徑
this.$router.replace("/name/view");
// 路由對象
this.$router.replace({path:"/name/view"});
// 命名路由帶 params 
this.$router.replace({name:"name_view",params:{age:24}});
// path 和 query
this.$router.replace({path:"name_view",query:{age:24}});
// this.$router.replace({path:"/name/view",params:{age:24}});

重定向和別名

// 路由重定向:訪問 /index ，重定向到 /
{
    path:"/index",
    redirect:"/"
}

redirect 也可設置一個對象：

{
    path:"/index",
    redirect:{
        name:"home"
    }
}

redirect 還可以設置為一個函數，傳遞一個參數 to,可根據該對象的不同值，重定向到不同的頁面，返回一個 命名路由 或者 字符串路徑 。

{
    path:"/index",
    redirect:to=>{
        // do something with to 
        return {
            name:"home"
        }
    }
}

to 是一個包含路徑參數的對象：

{
    name: "index",
    meta: {},// 路由元數據，可在全局導航守衛中獲取該對象，然后不同頁面設置不同的值，比如設置頁面的標題
    path: "/index", // 路由路徑 解析為絕對路徑 /a/b
    hash: "", // 書簽
    query: {}, // 查詢參數 /a?user=jack, $route.query.uer 的值為 jack
    params: {}, //
    fullPath: "/index", // 完整路徑
    matched: [{ // 當前路由的所有嵌套路徑片段的路由記錄,路由記錄就是路由的副本。
        path: "/index",
        regex: {
            keys: []
        },
        components: {},
        instances: {},
        name: "index",
        meta: {},
        props: {}
    }],
    redirectedForm:""http:// 重定向來源的名字
}

router.beforeEach((to, from, next) => {
    console.log("①，全局前置守衛,beforeEach");
    //給每個頁面設置不同的標題，標題就從 meta 中獲取
    //setTitle = (title)=>{
    // window.document.title=title||"admin"
    //}
    to.meta && setTitle(to.meta.title);
    next(()=>{
        console.log("②，全局前置守衛,beforeEach");
    });
});

路徑別名

{
    name: "home",
    alias:"home_page",// 路徑別名
    path: "/",
    component: Home
}

云服務器 GPU云服務器 vue基礎教程 Vue_Vue Vue vue3 學習筆記 (五)——vue3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104754.html

Vue-router(vue路由基礎詳解)

摘要：你可以在創建實例的時候，在配置中給某個路由設置名稱。如果沒有設置名字，那么默認為。 Vue.js路由(Vue-router) 安裝直接引入 vue-router下載鏈接https://unpkg.com/vue-router/... npm下載 npm install vue-router 如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：在你的文...

JasinYip 2019-08-21 16:26 評論0 收藏0
vue-router 基礎知識點

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監測值變化，可以在對象上監聽這個事件。這兩個方法應用于瀏覽器記錄棧，在當前已有的基礎之上，它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統。vue-router是...

ningwang 2019-08-26 10:41 評論0 收藏0
20190613-Vue Router 基礎（一）

摘要：那么這個時候，我們需要在中，加載配置三個組件為復數。傳遞參數不需要在中進行配置獲取參數其他的寫法帶查詢參數，下面的結果為拼到中什么是 Vue Router？ Vue Router是Vue.js的官方路由管理器，可以控制Vue單頁應用的路由。如何快速上手？ vue-cli腳手架自帶Vue-Router依賴新版的vue-cli腳手架中，默認default模式沒有router依賴，請選...

andong777 2019-08-23 18:07 評論0 收藏0
vue輕量級后臺管理系統基礎模板

摘要：具體實現請查看和的退出登陸回調方法。現在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據后臺數據來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。項目地址 vue-admin-template 在線預覽更新 2019.6.25 更新修復路由表沖突問題退出當前用戶，換賬號重新登陸時，上個賬號和現在的賬號路由表會有...

2shou 2019-08-23 14:17 評論0 收藏0
【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現 Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件。總結這一章主要是介紹了如何使用在中構建我們的前端路由。系列目錄地址一、基礎知識概覽第一章 - 一些基礎概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設定（posted a...

cpupro 2019-05-22 19:26 評論0 收藏0