一、命名路由

　　有時我們通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

　　我們直接在路由下添加一個 name 即可。

const router = new VueRouter({
  routes: [
    {
      path: ‘/user/:userId‘,
      name: ‘user‘,
      component: User
    }
  ]
})

　　要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>

//跟代碼調用 router.push() 是一回事
router.push({ name: ‘user‘, params: { userId: 123 }})

二、命名視圖

　　有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar（側導航） 和 main（主內容） 兩個視圖，這個時候命名視圖就派上用場了。

　　你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 router-view 沒有設置名字，那麽默認為 default。

　　當我們的視圖如上時，我們會發現每一個路由被渲染了兩次，所以我們需要為視圖命名。

<router-view name="a"></router-view>
<router-view name="b"></router-view>

var routes=[
    {
        path:"/one",
        name:"one",
        components:{
            a:{template:"#a"},
            b:{template:"#b"}
        }
    }
]
 

　　註意：要變成components才行

　　我們也有可能使用命名視圖創建嵌套視圖的復雜布局。這時你也需要命名用到的嵌套 router-view 組件

{
  path: ‘/settings‘,
  // 你也可以在頂級路由就配置命名視圖
  component: UserSettings,
  children: [{
    path: ‘emails‘,
    component: UserEmailsSubscriptions
  }, {
    path: ‘profile‘,
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

　　其實只不過是，換到children裏面去了而已

三、重定向和別名

　　重定向(Redirect)就是通過各種方法將各種網絡請求重新定個方向轉到其它位置，用於網站調整或網頁被移到一個新地址，它也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

var router = new VueRouter({
  routes: [
    { path: ‘/a‘, redirect: ‘/b‘ }
  ]
})

　　重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
  routes: [
    { path: ‘/a‘, redirect: { name: ‘foo‘ }}
  ]
})

　　甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
  routes: [
    { path: ‘/a‘, redirect: to => {
      // 方法接收 目標路由 作為參數
      // return 重定向的 字符串路徑/路徑對象
    }}
  ]
})

　　別名：/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。簡單的說就是給 /a 起了一個外號叫做 /b，但是本質上還是 /a

　　上面對應的路由配置為：

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

　　別名的功能讓你可以自由地將 UI 結構映射到任意的 URL，而不是受限於配置的嵌套路由結構。

四、路由組件傳參

　　在組件中使用 $route 會使之與其對應路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

　　使用 props 將組件和路由解耦：

const User = {
  template: ‘<div>User {{ $route.params.id }}</div>‘
}
const router = new VueRouter({
  routes: [
    { path: ‘/user/:id‘, component: User }
  ]
})

　　通過 props 解耦，取代與 $route 的耦合

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 }
    }
  ]
})

　　這樣你便可以在任何地方使用該組件，使得該組件更易於重用和測試。

1、布爾模式

　　如果 props 被設置為 true，route.params 將會被設置為組件屬性。

2、對象模式

　　如果 props 是一個對象，它會被按原樣設置為組件屬性。當 props 是靜態的時候有用。

const router = new VueRouter({
  routes: [
    { path: ‘/promotion/from-newsletter‘, component: Promotion, props: { newsletterPopup: false } }
  ]
})

3、函數模式

　　你可以創建一個函數返回 props。這樣你便可以將參數轉換成另一種類型，將靜態值與基於路由的值結合等等

const router = new VueRouter({
  routes: [
    { path: ‘/search‘, component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

　　URL： /search?q=vue 會將 {query: ‘vue‘} 作為屬性傳遞給 SearchUser 組件。

　　請盡可能保持 props 函數為無狀態的，因為它只會在路由發生變化時起作用。如果你需要狀態來定義 props，請使用包裝組件，這樣 Vue 才可以對狀態變化做出反應。

Vue-router路由基礎總結（二）