vue 路由基礎(chǔ)

mingde 發(fā)布于2019-08-23 18:09 / 3189人閱讀

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

vue 路由基礎(chǔ)

vue 使用 vue-router 插件處理路由，路由是開發(fā)單頁應(yīng)用必須掌握的知識。

什么是 vue-router？

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

（2）它與傳統(tǒng)的頁面區(qū)別在于：

傳統(tǒng)的頁面應(yīng)用采用的是后端路由，即通過超鏈接來實現(xiàn)頁面切換和跳轉(zhuǎn)的。

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

router-link 和 router-view 組件

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

更多詳細(xì)信息

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

$route 是當(dāng)前路由，可用 watch在組件中監(jiān)它的變化，有一個 params 屬性，值一個包含動態(tài)路由的對象。

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

route 和 router 的區(qū)別

路由對象為：

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

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

$route.params.name //給同一個組件設(shè)置傳遞不同的params，實現(xiàn)組件的復(fù)用

嵌套路由

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

命名路由

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

命名視圖

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

路由對象：

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

JS 操作路由

路由對象 $router 有多個函數(shù)push 、 go 、 replace

push 可導(dǎo)航到不同的頁面，會將該路徑進(jìn)入歷史記錄。
$router.push 和 window.history.pushSate 一樣。
push 可接受不同的參數(shù)：

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

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

// 命名路由加參數(shù)
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 的參數(shù)是一個整數(shù)，表示回退或者前進(jìn)多少歷史記錄。

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

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

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

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

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

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

// 路由名字
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 也可設(shè)置一個對象：

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

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

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

to 是一個包含路徑參數(shù)的對象：

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

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

路徑別名

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

GPU云服務(wù)器云服務(wù)器 vue基礎(chǔ)教程 Vue_Vue Vue vue3 學(xué)習(xí)筆記 (五)——vue3

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104754.html

發(fā)表評論

登陸后可評論

0條評論

mingde

男|高級講師

我要關(guān)注我要私信

TA的文章

常用布局總結(jié)

閱讀 1409·2019-08-30 15:44
跳起來：你不知道的CSS Animation新的Steps()值

閱讀 2183·2019-08-30 11:04
前端每日實戰(zhàn)：11# 視頻演示如何用純 CSS 創(chuàng)作一個熒光脈沖 loader 特效

閱讀 582·2019-08-29 15:17
【JavaScript】面向?qū)ο笾瓼unction類型

閱讀 2607·2019-08-26 12:12
vue 路由基礎(chǔ)

閱讀 3190·2019-08-23 18:09
javascript數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)筆記

閱讀 975·2019-08-23 15:37
webpack4系列教程（七）：使用 babel-loader

閱讀 1607·2019-08-23 14:43
vue-router懶加載時添加loading效果

閱讀 2996·2019-08-23 13:13

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue 路由基礎(chǔ)

相關(guān)文章

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

vue-router 基礎(chǔ)知識點

**20190613-Vue Router 基礎(chǔ)（一）**

vue輕量級后臺管理系統(tǒng)基礎(chǔ)模板

**【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現(xiàn) Vue 中的前端路由控制**

發(fā)表評論

0條評論

mingde

男|高級講師

TA的文章

常用布局總結(jié)

跳起來：你不知道的CSS Animation新的Steps()值

前端每日實戰(zhàn)：11# 視頻演示如何用純 CSS 創(chuàng)作一個熒光脈沖 loader 特效

【JavaScript】面向?qū)ο笾瓼unction類型