Vue路由（vue-router）

時間 2019-11-21

原文原文鏈接

1、介紹

一、vue-router安裝

官方文檔:https://router.vuejs.org/zh/installation.html
下載地址:https://unpkg.com/vue-router@2.0.0/dist/vue-router.jshtml

二、路由介紹

(1). 對於普通的網站，全部的超連接都是URL地址，全部的URL地址都對應服務器上對應的資源
(2). 對於單頁面應用程序來講，主要經過URL中的hash(#號)來實現不一樣頁面之間的切換，同時，hash有一個特色：HTTP請求中不會包含hash相關的內容；因此，單頁面程序中的頁面跳轉主要用hash實現
(3). 在單頁面應用程序中，這種經過hash改變來切換頁面的方式，稱做前端路由（區別於後端路由）前端

2、使用 vue-router

1. 導入 vue-router

<script src="vue-router.js"></script>

2. 使用 router-link 組件來導航

<router-link to="/login">登陸</router-link>

3. 使用 router-view 組件來顯示匹配到的組件

<router-view></router-view>

4. 建立使用Vue.extend建立組件

var aaa = Vue.extend({
      template: '<h1>aaa</h1>'
})
#簡寫
var aaa = {
      template: '<h1>aaa</h1>'
}

5. 建立一個路由 router 實例，經過 routers 屬性來定義路由匹配規則

var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
});

6. 使用 router 屬性來使用路由規則

var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規則
});

七、在路由中設置自定義參數

//方式一（在router-link中設置好參數）
<router-link to="/q1?id=10&name=q1">傳參方式一</router-link>
# 經過 this.$route.query來獲取路由中的參數
var q1 = {
        template: '<h1>傳參方式一****{{ $route.query.id }}***{{ $route.query.name }}</h1>'
    }


//方式二（在規則中定義參數）
{ path: '/q2/:id/:name', component: q2 }
#經過this.$route.params來獲取路由中的參數
var q2 = {
        template: '<h1>傳參方式二****{{ $route.params.id }}***{{ $route.params.name }}</h1>'
    }

八、1-7的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>

</head>
<body>
  <div id="app">

    <!-- <a href="#/login">登陸</a> -->
    <!-- <a href="#/register">註冊</a> -->
  <a href="#/register">註冊</a>
  <router-link to="/login">登陸</router-link>
  <router-link to="/aaa">aaa</router-link>
   <!-- 路由傳參 若是在路由中，使用 查詢字符串，給路由傳遞參數,能夠直接寫在參數路徑後面 -->

   <router-link to="/q1?id=10&name=q1">傳參方式一</router-link>

   <router-link to="/q2/12/q2">傳參方式二</router-link>
    <!-- router-link 默認渲染爲一個a 標籤 -->
   <!--   <router-link to="/login" tag="span">登陸</router-link> -->
    <!--  <router-link to="/register">註冊</router-link> -->


    <!-- 這是 vue-router 提供的元素，專門用來 看成佔位符的，未來，路由規則，匹配到的組件，就會展現到這個 router-view 中去 -->
    <!-- 因此： 咱們能夠把 router-view 認爲是一個佔位符 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>

  </div>

  <script>
    // 組件的模板對象
    var login = {
      template: '<h1>登陸組件Login</h1>'
    }

    var register = {
      template: '<h1>註冊組件register</h1>'
    }

    var aaa = Vue.extend({
      template: '<h1>aaa</h1>'
    })

    var q1 = {
        //經過 this.$route.query來獲取路由中的參數
        template: '<h1>傳參方式一****{{ $route.query.id }}***{{ $route.query.name }}</h1>'
    }

    var q2 = {
        //經過 this.$route.params來獲取路由中的參數
        template: '<h1>傳參方式二****{{ $route.params.id }}***{{ $route.params.name }}</h1>'
    }

    /*  Vue.component('login', {
       template: '<h1>登陸組件</h1>'
     }) */

    // 2. 建立一個路由對象， 當 導入 vue-router 包以後，在 window 全局對象中，就有了一個 路由的構造函數，叫作 VueRouter
    // 在 new 路由對象的時候，能夠爲 構造函數，傳遞一個配置對象
    var routerObj = new VueRouter({
      // route // 這個配置對象中的 route 表示 【路由匹配規則】 的意思
      routes: [ // 路由匹配規則
        // 每一個路由規則，都是一個對象，這個規則對象，身上，有兩個必須的屬性：
        //  屬性1 是 path， 表示監聽 哪一個路由連接地址；
        //  屬性2 是 component， 表示，若是 路由是前面匹配到的 path ，則展現 component 屬性對應的那個組件
        // 注意： component 的屬性值，必須是一個 組件的模板對象， 不能是 組件的引用名稱；
        // { path: '/', component: login },
        { path: '/', redirect: '/login' }, // 這裏的 redirect 和 Node 中的 redirect 徹底是兩碼事
        { path: '/login', component: login },
        { path: '/register', component: register },
        { path: '/aaa', component: aaa },
        { path: '/q1', component: q1 },
        { path: '/q2/:id/:name', component: q2 },
      ],
      linkActiveClass: 'myactive'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj // 將路由規則對象，註冊到 vm 實例上，用來監聽 URL 地址的變化，而後展現對應的組件
    });
  </script>

</body>
</html>

vue路由1-7的使用例子

九、使用children屬性實現路由嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="app">

    <router-link to="/account">Account</router-link>

    <router-view></router-view>

  </div>

  <template id="tmpl">
    <div>
      <h1>這是 Account 組件</h1>

      <router-link to="/account/login">登陸</router-link>
      <router-link to="/account/register">註冊</router-link>

      <router-view></router-view>
    </div>
  </template>

  <script>

    // 組件的模板對象
    var account = {
      template: '#tmpl'
    }

    var login = {
      template: '<h3>登陸</h3>'
    }

    var register = {
      template: '<h3>註冊</h3>'
    }

    var router = new VueRouter({
      routes: [
        {
          path: '/account',
          component: account,
          // 使用 children 屬性，實現子路由，同時，子路由的 path 前面，不要帶 / ，不然永遠以根路徑開始請求，這樣不方便咱們用戶去理解URL地址
          children: [
            { path: 'login', component: login },
            { path: 'register', component: register }
          ]
        }
      ]
    });

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

</body>
</html>

路由嵌套例子

3、Vue中的watch、computed、methods屬性介紹

一、watch（實現 `名` 和 `姓` 兩個文本框的內容改變，則全名的文本框中的值也跟着改變）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一個參數是新數據，第二個參數是舊數據
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>
</body>
</html>

watch

二、computed`計算屬性

(1).默認只有getter的計算屬性vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 計算屬性； 特色：當計算屬性中因此來的任何一個 data 屬性改變以後，都會從新觸發 本計算屬性 的從新計算，從而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>
</body>
</html>

getter屬性

(2).定義有getter和setter的計算屬性vue-router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 點擊按鈕從新爲 計算屬性 fullName 賦值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>
</body>
</html>

getter和setter的計算屬性

三、methods(咱們使用vue寫函數的地方)

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello vue',
        },
        methods:{
            hello: function(){
                alert('hello vue')
            }
        },
    })
</script>

四、watch、computed和methods之間的對比

1. computed屬性的結果會被緩存，除非依賴的響應式屬性變化纔會從新計算。主要看成屬性來使用
2. methods方法表示一個具體的操做，主要書寫業務邏輯
3. watch一個對象，鍵是須要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操做；能夠看做是computed和methods的結合體後端

4、使用watch監視路由地址的改變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/login">登陸</router-link>
    <router-link to="/register">註冊</router-link>

    <!-- 容器 -->
    <router-view></router-view>

  </div>

  <script>
    // 2. 建立子組件
    var login = {
      template: '<h3>這是登陸子組件</h3>'
    }

    var register = {
      template: '<h3>這是註冊子組件</h3>'
    }

    // 3. 建立一個路由對象
    var router = new VueRouter({
      routes: [ // 路由規則數組
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相關的類
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router,
      watch: {
        //  this.$route.path
        '$route.path': function (newVal, oldVal) {
          if (newVal === '/login') {
            alert('歡迎進入登陸頁面')
          } else if (newVal === '/register') {
            alert('歡迎進入註冊頁面')
          }
        }
      }
    });
  </script>
</body>
</html>

watch監視路由地址的改變

相關標籤/搜索

vuerouter

路由

vue+vuerouter+vuex+axios

webpack+vue+vuerouter

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。