vue 路由基礎

vue 路由基礎

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

什麼是 vue-router？

（1）vue-router 是 Vue 官方提供前端路由插件，藉助它咱們實現能夠基於路由和組件的單頁面應用。

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

• 傳統的頁面應用採用的是後端路由，即經過超連接來實現頁面切換和跳轉的。
• 而在 vue-router 單頁面應用中，則是經過路徑之間的切換（實際上就是組件的切換）。

router-link 和 router-view 組件

router-link 是一個a（連接）標籤的封裝，router-view 是路由視圖，渲染 router-link 匹配到的組件，可配合使用<transition> 和 <keep-alive> 使用。

更多詳細信息

路由配置

動態路由

$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 屬性動態綁定 路由對象。

<router-link :to="{name:'home'}"></router-link>

命名視圖

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

<!-- 視圖渲染組件,該組件內不須要房子任何內容，可寫成只閉合標籤-->
<router-view />
<!-- 有多個路由視圖須要匹配，則用命名視圖 -->
<router-view name="sister"></router-view>
<router-view name="brother"></router-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:''// 重定向來源的名字
}

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
}