VueRouter基礎(chǔ)

FreeZinG 發(fā)布于2019-08-01 18:15 / 3183人閱讀

摘要：的路徑的路由組件點(diǎn)擊后的結(jié)果你會(huì)發(fā)現(xiàn)被匹配后中的就會(huì)接收到字符串，因此輸出結(jié)果如圖所示對(duì)象模式如果是一個(gè)對(duì)象，它會(huì)被按原樣設(shè)置為組件屬性。最終的就是傳入的

安裝

直接下載（官方CDN）

https://unpkg.com/vue-router/...
通過頁(yè)面script標(biāo)簽引入，如下：

NPM安裝

npm install vue-router --save-dev

安裝完成后需要Vue.use()安裝此功能，例如：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

入門

簡(jiǎn)單例子



  


vue1217

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App";

Vue.use(VueRouter);

const foo = {
  template: "foo"
};
const bar = {
  template: "bar"
};

const routes = [{
  path: "/foo",
  component: foo
}, {
  path: "/bar",
  component: bar
}];

let router = new VueRouter({
  routes
});

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

動(dòng)態(tài)路由匹配

通過帶有冒號(hào)標(biāo)記的屬性匹配，例如

path: "/foo/test0"
path: "/foo/test1"
都可以被
path： "/foo/:id"
匹配到
并且被匹配到的組件內(nèi)部可以通過
this.$route.params獲取到被匹配的參數(shù)
如上：
test0組件下的params參數(shù)為
{
    id: "test0"
}

同樣的:
/foo/test0/jason/0411
被
/foo/:id/:name/:birth
匹配到的參數(shù)如
{
    id: "test0",
    name: "jason",
    birth: "0411"
}

小提示：對(duì)于通過路由進(jìn)行組件間的切換時(shí)，并不會(huì)來回構(gòu)建組件實(shí)例，而是復(fù)用已存在的組件，想要監(jiān)聽路由參數(shù)變化可以通過watch屬性或者通過beforeRouteUpdate鉤子函數(shù)做操作

{
    watch: {
        "$route"(to, from) {
            // something to do
        }
    }
}
{
    beforeRouteUpdate(to, from, next) {
        // something to do
        next();// next必須執(zhí)行不然的話beforeRouteUpdate鉤子函數(shù)不會(huì)resolved
    }
}

嵌套路由

顧名思義就是路由跳到的組件又包含有路由。
舉個(gè)栗子：




const foo = {
  template: `
          
            {{ $route.params.id }}
            
          
        `
};

const home = {
  template: "home"
};
const hm = {
  template: "hm"
};
const pf = {
  template: "pf"
};
const ps = {
  template: "ps"
};

const routes = [{
  path: "/:id",
  component: foo,
  children: [
{
  path: "",
  component: home
}, {
  path: "hm",
  component: hm
}, {
  path: "pf",
  component: pf
}, {
  path: "ps",
  component: ps
}
  ]
}];

通過$router導(dǎo)航

在組件Vue實(shí)例內(nèi)部可以通過
this.$router.push(location, onComplete?, onAbort?)
this.$router.replace(location, onComplete?, onAbort?)
this.$router.go(n)

// 字符串
router.push("home")
// 對(duì)象
router.push({ path: "home" })
// 命名的路由
router.push({ name: "user", params: { userId: 123 }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})

const userId = 123
router.push({ name: "user", params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: "/user", params: { userId }}) // -> /user

// 在瀏覽器記錄中前進(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)

命名路由

在創(chuàng)建路由的時(shí)候可以通過name屬性設(shè)置路由名稱

let routes = [{
    path: "/foo/:userId",
    name: "test",
    component: User
}];

如果需要鏈接到這個(gè)命名路由我們可以醬紫

也可以醬紫

router.push({
    name: "test",
    params: {
        userId: 410100
    }
});

命名視圖

很多時(shí)候我們會(huì)碰到并存的多個(gè)視圖（router-view)，我們就需要為視圖設(shè)置name沒有設(shè)置的為default

當(dāng)然構(gòu)建路由的時(shí)候也需要設(shè)置對(duì)應(yīng)視圖的組件映射

const router = new VueRouter({
  routes: [
    {
      path: "/",
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向

let routes = [{
  path: "/",
  redirect: "/goods"
},{
  path: "/goods",
  component: goods
}];
當(dāng)path為/的時(shí)候會(huì)自動(dòng)重定向至/goods加載goods組件
當(dāng)然也可以通過name重定向,作用是相同的
let routes = [{
  path: "/",
  redirect: {
    name: "goods"
  }
},{
  path: "/goods",
  name: "goods",
  component: goods
}];
當(dāng)然也可以是一個(gè)方法
let routes = [{ path: "/a", redirect: to => {
  // 方法接收 目標(biāo)路由 作為參數(shù)
  // return 重定向的 字符串路徑/路徑對(duì)象
}}];

別名

別名與重定向只有一丟丟不同，重定向指/a路徑調(diào)到/b路徑加載，別名指還是加載/a路徑只是加載內(nèi)容是/b路徑下的

const router = new VueRouter({
  routes: [{ 
    path: "/a", 
    component: A, 
    alias: "/b" 
  }]
});

5.路由參數(shù)傳遞
有三種模式進(jìn)行傳遞：布爾模式、對(duì)象模式、函數(shù)模式
布爾模式: 如果props被設(shè)置為true，route.params將會(huì)被設(shè)置為組件屬性。

router-link的路徑
foo

foo的路由
{
  path: "/foo/:userName",
  name: "foo",
  component: foo,
  props: true
}

foo組件

點(diǎn)擊router-link后的結(jié)果

你會(huì)發(fā)現(xiàn)/foo/params被path匹配后

route.params =  {
    userName: "params"
};

props中的userName就會(huì)接收到字符串"params"，因此輸出結(jié)果如圖所示

對(duì)象模式：如果props是一個(gè)對(duì)象，它會(huì)被按原樣設(shè)置為組件屬性。

{
  path: "/foo",
  name: "foo",
  component: foo,
  props: {
    userName: "From Obj"
  }
}

渲染后的結(jié)果：

函數(shù)模式

{
  path: "/foo",
  name: "foo",
  component: foo,
  props: (route) => ({userName: route.query.name})
}

看起來還是很清楚的，只是props會(huì)接收一個(gè)當(dāng)前的路由參數(shù)，將參數(shù)中的值轉(zhuǎn)換成你想要的值，以上三種模式自然也不影響通過router-view的v-bind:user-name這種方式傳遞，但是對(duì)于同名的參數(shù)值會(huì)有影響。

let lastProps = {};
let vBindProps = {
    userName: "vBind",
    name: "vBind"
};
let routeProps ={
    userName: "route"
};
Object.assign(lastProps,vBindProps,routeProps);
// {userName: "route", name: "vBind"}
最終的lastProps就是傳入的props