手把手教你學(xué)Vue-3(路由)

SolomonXie 發(fā)布于2019-08-02 16:02 / 1781人閱讀

摘要：記得要通過配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能動(dòng)態(tài)路由一個(gè)路徑參數(shù)使用冒號(hào)標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到，可以在每個(gè)組件內(nèi)使用。

1.路由的作用

1.當(dāng)我們有多個(gè)頁面的時(shí)候，我們需要使用路由，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

簡(jiǎn)單的路由

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

// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡(jiǎn)單著吧。
const router = new VueRouter({
  routes // （縮寫）相當(dāng)于 routes: routes
})

// 4. 創(chuàng)建和掛載根實(shí)例。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
  router
}).$mount("#app")

動(dòng)態(tài)路由
一個(gè)『路徑參數(shù)』使用冒號(hào) : 標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到 this.$route.params，可以在每個(gè)組件內(nèi)使用。于是，我們可以更新 User 的模板，輸出當(dāng)前用戶的 ID：

const User = {
  template: "User"
}

const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開頭
    { path: "/user/:id", component: User }
  ]
})

潛套路由

const router = new VueRouter({
  routes: [
    { path: "/user/:id", component: User,
      children: [
        {
          // 當(dāng) /user/:id/profile 匹配成功，
          // UserProfile 會(huì)被渲染在 User 的  中
          path: "profile",
          component: UserProfile
        },
        {
          // 當(dāng) /user/:id/posts 匹配成功
          // UserPosts 會(huì)被渲染在 User 的  中
          path: "posts",
          component: UserPosts
        }
      ]
    }
  ]
})

子節(jié)點(diǎn)的router 會(huì)渲染到父節(jié)點(diǎn)User router-view 里面

router.push、 router.replace 和 router.go
想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。

router-link :to="{ name: "user", params: { userId: 123 }}">User
router.push({ name: "user", params: { userId: 123 }})

2.命名視圖

一個(gè) layout 布局展示






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

命名視圖中我們需要注意的地方，在props路由傳值上面 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 props 選項(xiàng)

const User = {
  props: ["id"],
  template: "User {{ id }}"
}
const router = new VueRouter({
  routes: [
    { path: "/user/:id", component: User, props: true },

    // 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
    {
      path: "/user/:id",
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

3.深入理解路由

路由的配置
declare type RouteConfig = {
  path: string;
  component?: Component;
  name?: string; // 命名路由
  components?: { [name: string]: Component }; // 命名視圖組件
  redirect?: string | Location | Function;
  props?: boolean | string | Function;
  alias?: string | Array;
  children?: Array; // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;

  // 2.6.0+
  caseSensitive?: boolean; // 匹配規(guī)則是否大小寫敏感？(默認(rèn)值：false)
  pathToRegexpOptions?: Object; // 編譯正則的選項(xiàng)
}

后面實(shí)際應(yīng)用中，在補(bǔ)充一下文檔----目前都是看官方文檔