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

laznrbfe 發布于2019-08-22 15:50 / 851人閱讀

摘要：記得要通過配置參數注入路由，從而讓整個應用都有路由功能動態路由一個路徑參數使用冒號標記。當匹配到一個路由時，參數值會被設置到，可以在每個組件內使用。

1.路由的作用

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

簡單的路由

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

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

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

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

const User = {
  template: "User"
}

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

潛套路由

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

子節點的router 會渲染到父節點User router-view 里面

router.push、 router.replace 和 router.go
想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 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; // 匹配規則是否大小寫敏感？(默認值：false)
  pathToRegexpOptions?: Object; // 編譯正則的選項
}

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

云服務器 GPU云服務器手把手教你做圖像識別手把手教你阿里云服務器搭建商城 vue-cli3 帶你學c帶你飛

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93795.html

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

摘要：記得要通過配置參數注入路由，從而讓整個應用都有路由功能動態路由一個路徑參數使用冒號標記。當匹配到一個路由時，參數值會被設置到，可以在每個組件內使用。 1.路由的作用 1.當我們有多個頁面的時候，我們需要使用路由，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。簡單的路由 const routes = [ { path: ...

Prasanta 2019-08-30 14:17 評論0 收藏0
手把手教你學Vue-3(路由)

摘要：記得要通過配置參數注入路由，從而讓整個應用都有路由功能動態路由一個路徑參數使用冒號標記。當匹配到一個路由時，參數值會被設置到，可以在每個組件內使用。 1.路由的作用 1.當我們有多個頁面的時候，我們需要使用路由，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。簡單的路由 const routes = [ { path: ...

SolomonXie 2019-08-02 16:02 評論0 收藏0
手把手教你學Dapr

摘要：配置配置使用概率抽樣。采樣率定義了對跟蹤跨度進行采樣的概率，其值可以介于和含之間。例如，以下配置對象將采樣率更改為即每個跨度都被采樣，并使用協議將跟蹤發送到位于的服務器文件路徑注將采樣率更改為會完全禁用跟蹤。目錄手把手教你學Dapr - 1. .Net開發者的大時代手把手教你學Dapr - 2. 必須知道的概念手把手教你學Dapr - 3. 使用Dapr運行第一個.Net程序手把手教你學Da...

qqlcbb 2021-11-18 10:07 評論0 收藏0
手把手教你學Vue-2(組件開發)

摘要：組件聲明組件分為全局的和局部的。父組件通過給子組件下發數據，子組件通過事件給父組件發送消息。以下實例中子組件已經和它外部完全解耦了。 1.vue 組件-聲明組件分為全局的和局部的。全局聲明 Vue.component(tagName, options) ** 引用組件 // 注冊 Vue.comp...

lansheng228 2019-08-30 14:17 評論0 收藏0
手把手教你學Vue-2(組件開發)

摘要：組件聲明組件分為全局的和局部的。父組件通過給子組件下發數據，子組件通過事件給父組件發送消息。以下實例中子組件已經和它外部完全解耦了。 1.vue 組件-聲明組件分為全局的和局部的。全局聲明 Vue.component(tagName, options) ** 引用組件 // 注冊 Vue.comp...

Null 2019-08-22 15:49 評論0 收藏0