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

木子喵發表於2019-02-16
Vue路由

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: `<div>User</div>`
}

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 的 <router-view> 中
          path: `profile`,
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          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-link>
router.push({ name: `user`, params: { userId: 123 }})

2.命名檢視

一個 layout 佈局展示

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>


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

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

const User = {
  props: [`id`],
  template: `<div>User {{ id }}</div>`
}
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<string>;
  children?: Array<RouteConfig>; // 巢狀路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;

  // 2.6.0+
  caseSensitive?: boolean; // 匹配規則是否大小寫敏感？(預設值：false)
  pathToRegexpOptions?: Object; // 編譯正則的選項
}

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

相關文章