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

Prasanta 發(fā)布于2019-08-30 14:17 / 1715人閱讀

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

1.路由的作用

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

簡單的路由

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

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

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

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

const User = {
  template: "User"
}

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

潛套路由

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

子節(jié)點的router 會渲染到父節(jié)點User router-view 里面

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

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

2.命名視圖

一個 layout 布局展示






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

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

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

    // 對于包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：
    {
      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; // 編譯正則的選項
}

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