Vue(day4)

這裏說的Vue中的路由是指前端路由，與後端路由有所區別。咱們可使用url來獲取服務器的資源，而這種url與資源的映射關係就是咱們所說的路由。對於單頁面程序來講，咱們使用url時經常經過hash的方法切換頁面，即咱們經常使用的錨點。好比：

<a href="#here">click me</a> /*跳轉到對應的錨點*/

<!-- ... -->

<div id="here">you find me</div> /*設置錨點*/

而請求路徑中的hash不會傳到後端，因此經常被用做前端切換頁面的方法，即在同一服務器資源下對頁面進行切換。

下面分別從Node和Vue中使用路由，來感覺具體的區別。

1、使用Node中的路由：express自帶ruoter

先看一下須要完成的效果：

當咱們點擊頁面上的Home和About按鈕是會跳轉到對應的服務器資源頁面。

首先安裝必要的模塊，建立文件目錄結構和前端資源文件。

# 初始化目錄
npm init -y
# 安裝須要的模塊
npm install express art-template express-art-template

其餘資源頁面能夠在參考這裏（可直接下載運行）

2、使用Vue中的路由：VueRouter

咱們使用官方路由來建立一個簡單的單頁面應用：

一、VueRouter的簡單入門

首先咱們須要安裝Vue.js和VueRouter.js

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

• html代碼

  <div id="app">
    <p>
          <router-link to="/home">Home</router-link>
          <router-link to="/about">About</router-link>
      </p>
      <router-view></router-view>
  </div>

  router-link是VueRouter提供的組件，默認會建立一個a標籤，並將to屬性的值做爲hash值最爲該連接的地址。

  router-view也是VueRouter提供的組件，用來顯示路由對應的模板。

• js代碼

  //一、建立路由視圖組件:包含了模板信息
  var home = {template: '<h3>This is home page!</h3>'};
  var about = {template: '<h3>This is about page!</h3>'};
  //二、建立路由規則（路由的映射關係）:是一個對象數組，至關於路由映射關係表
  var routes = [
      {path: '/home', component: home},
      {path: '/about', component: about}
  ];
  //三、建立一個路由實例
  var router  = new VueRouter({
      routes: routes
  });
  //四、將路由搭載到Vue實例中
  new Vue({
      el: '#app',
      router: router
  });

二、router-link

<router-link> 組件支持用戶在具備路由功能的應用中 (點擊) 導航。
經過 to 屬性指定目標地址，默認渲染成帶有正確連接的 <a> 標籤，能夠經過配置 tag 屬性生成別的標籤.。另外，當目標路由成功激活時，連接元素自動設置一個表示激活的 CSS 類名。

• to（String｜Location, required）

  to屬性規定了連接跳轉的路徑，因此是必須的，能夠是字符串，也能夠是表示路徑位置的對象。

  <!--將會渲染爲：/home-->
  <router-link to="home">link</router-link>
  
  <!--也能夠動態綁定-->
  <router-link :to="'home'"></router-link>
  
  <!--動態綁定時即可以傳入對象,如下渲染爲：/home?useid=123 -->
  <router-link :to="{path: 'home', query: {useid: '123'}}"></router-link>

• replace

  默認爲false，當設置該屬性後路由不會執行router.push()，而是執行router.replace()，這樣瀏覽器的history將不會產生導航記錄。

  <router-link to="home" replace></router-link>

• append

  若是設置了該屬性，則鏈接會變成相對連接。好比從/a處點擊了鏈接爲/b的來連接，則訪問的地址將變爲/a/b。

• tag

  指定導航連接渲染的標籤，默認爲a標籤。渲染爲其餘標籤後任然會監聽點擊事件，具備導航效果。

• active-class

  設置連接激活後使用的css類名，默認值爲router-link-active，設置後默認值任然存在。默認值可經過路由構造選項linkActiveClass進行配置。

• exact

  "是否激活" 默認類名的依據是 inclusive match (全包含匹配)。舉個例子，若是當前的路徑是 /a 開頭的，那麼 <router-link to="/a"> 也會被設置 CSS 類名。

• event(String | Array< String >)

  設置激活導航的事件。默認爲clcik。

• exact-active-calss

  配置當連接被精確匹配的時候應該激活的 class。默認值router-link-exact-active，該默認值也是能夠經過路由構造函數選項 linkExactActiveClass 進行全局配置的。

三、router-view

<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還能夠內嵌本身的 <router-view>，根據嵌套路徑，渲染嵌套組件。

四、路由構建選項

在建立路由是可傳入的參數，上面的實例中咱們傳入了路由規則信息的routes，此外還有其餘參數。

• routes(Array < routeConfig >)

  routes是包含路由映射關係的數組，數組的每一項都包含了一條路由映射信息。routeConfig能夠包含一些信息：

  declare type routeConfig = {
      path: string, //路徑
      component: componentObj,//視圖組件
      name: string,//命名路由
      components: {[name: string]: componentObj},//命名視圖組件
      redirect: string | Location | Function,
      props: boolean | Object | 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// 編譯正則的選項
  }

• mode

  最開始說到的前端路由和後端路由的差異，咱們可使用mode來配置路由的模式，有如下三種模式：

  • hash：瀏覽器模式，會在連接前加上"#"最爲倆連接，支持全部瀏覽器。
  • history：依賴 HTML5 History API 和服務器配置。
  • abstract：支持全部 JavaScript 運行環境，如 Node.js 服務器端。

• base

  設置路由的基路徑，默認爲"/"。

• linkActiveClass

• linkExactActiveClass

此外還有一些其餘可供選擇的項，這裏再也不一一贅述。更多細節請參考：Vue-router官方文檔

五、路由實例屬性

• router.app：配置了該路由的Vue根實例。
• router.mode：路由的模式。
• router.currentRute：當前路由對應的路由信息對象。

六、 路由對象

一個路由對象 (route object) 表示當前激活的路由的狀態信息，包含了當前 URL 解析獲得的信息，還有 URL 匹配到的路由記錄 (route records)。

路由對象是不可變 (immutable) 的，每次成功的導航後都會產生一個新的對象。

路由對象能夠出如今多個地方，自如組件內：this.$route。（注意是$route而不是$router，前者是路由對象，後者是路由實例）。

路由對象有如下屬性：

• $route.path：當前導航路徑。
• $route.params：一個 key/value 對象，包含了動態片斷和全匹配片斷，若是沒有路由參數，就是一個空對象。
• $route.query：一個 key/value 對象，表示 URL 查詢參數。
• $route.hash：當前路由的 hash 值 (帶 #) ，若是沒有 hash 值，則爲空字符串。
• $route.fullPath：完成解析後的 URL，包含查詢參數和 hash 的完整路徑。
• $route.matched：一個數組，包含當前路由的全部嵌套路徑片斷的路由記錄 。路由記錄就是 routes 配置數組中的對象副本 (還有在 children 數組)。
• $route.name：當前路由的名稱，若是有的話。
• $route.redirectedFrom：若是存在重定向，即爲重定向來源的路由的名字。

更多細節請參考：Vue-router官方文檔

七、一些簡單的例子

#路由對象的使用

<p>
    <!--注意：這裏若是沒有 / 就會變成append模式 ，即在當前鏈接下添加鏈接-->
    <router-link to="/query?id='123'&name='jinx'">Query</router-link>
    <router-link to="/params/456/yasuo">Params</router-link>
</p>
<router-view></router-view>

//一、建立路由視圖組件:在模版中掉用路由對象
var query = {template: '<h3>this is query: id=<em>{{$route.query.id}}</em>&name=<em>{{$route.query.name}}</em></h3>'};
var params = {template: '<h3>This is params: id=<em>{{$route.params.id}}</em>, name=<em>{{$route.params.name}}</em></h3>'};

//二、建立路由規則
var routes = [
    {path: '/query', component: query},
    {path: '/params/:id/:name', component: params}
];

//三、建立一個路由實例
var router  = new VueRouter({
    routes: routes
});
//四、將路由搭載到Vue實例中
new Vue({
    el: '#app',
    router: router
});

#路由嵌套

<div id="app">
<!--路由-->
<router-link to="/">Home</router-link>
<router-link to="/account">Account</router-link>
<router-view></router-view>
<!--模板-->
<script type="text/template" id="account-template">
    <div>
        <h3>用戶操做界面</h3>
        <!--子路由-->
        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
    </div>
</script>
</div>

//一、建立路由視圖組件
var home = {template: '<h3>home page</h3>'};
var account = {template: '#account-template'};//能夠導入模板(這裏使用template標籤的使用有bug不知道什麼緣由)
var login = {template: '<h3>登錄</h3>'};
var register = {template: '<h3>註冊</h3>'};
//二、建立路由規則
var routes = [
    {path: '/', component: home},
    {path: '/account',
    component: account, 
    children: [
        {path: '/account/login', component: login},
        {path: '/account/register', component: register}
    ]
    },
];

//三、建立一個路由實例
var router  = new VueRouter({
    routes: routes
});
//四、將路由搭載到Vue實例中
new Vue({
    el: '#app',
    router: router
});

能夠嘗試一下若是子路由也寫在外部routes的效果（當寫在外部就會共用router-view標籤）。關於模板須要注意的是，可使用相似script這樣的標籤來包裹模板，而後根據id進行引用便可，另外，模板只能有一個根元素。關於模板標籤的使用能夠參考這篇文章：HTML5 template 標籤元素簡介

#命名視圖組件

目前咱們都只是用了一個router-view標籤，若是咱們須要使用多個，那咱們就須要對組件進行命名，不然沒法找到要渲染的位置。注意，使用的是conponents而非component。

好比下面的例子：

<div id="app">
<!--對路由視圖進行命名-->
<router-view></router-view>
<div style="display: flex;height: 800px;">
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>
</div>

//一、建立路由視圖組件
var header = {template: '<div class="header">header</div>'};
var left = {template: '<div class="left">left</div>'};
var main = {template: '<div class="main">main</div>'};
//二、建立路由規則
var routes = [
    {path: '/',
    components: {
        default: header,
        left: left,
        main: main
    }//命名視圖組件
}];

//三、建立一個路由實例
var router  = new VueRouter({
    routes: routes
});
//四、將路由搭載到Vue實例中
new Vue({
    el: '#app',
    router: router
});

再添加一下樣式：

body{
    margin: 0px;
    padding: 0px;
}
.header{
    background-color: #6aa4d2;
    height: 100px;
}
.left{
    background-color: #999ddd;
    flex: 2;
}
.main{
    background-color: #b6b985;
    flex: 8;
}

就能夠看到如下佈局效果：