vue-router基礎知識

阿新 • • 發佈：2018-12-10

對於前端來說，其實瀏覽器配合超級連線就很好的實現了路由功能。但是對於單頁面應用來說，瀏覽器和超級連線的跳轉方式已經不能適用，
所以各大框架紛紛給出了單頁面應用的解決路由跳轉的方案。

Vue框架的相容性非常好，可以很好的跟其他第三方的路由框架進行結合。當然官方也給出了路由的方案： vue-router;
建議還是用官方的最好，使用量也是最大，相對來說Vue框架的升級路由元件升級也會及時跟上，所以為了以後的維護和升級方便還是使用Vue自家的東西最好。

Vue-router的版本對應

注意: [email protected] 只適用於 Vue 2.x 版本。
[email protected]

對應於Vue1.x版本。

的Github地址：vue-router
文件地址

vue-router的安裝使用

CDN連線方式

https://unpkg.com/vue-router/dist/vue-router.js

npm 安裝

npm install vue-router

vue-router 入門demo

vue-router開發的步驟：

第一步：引入vue和vue-router包。

可以使用cdn的方式或者npm的方式。如果配合npm和webpack的話可以直接作為一個模組匯入即可。但是作為初學入門的話建議還是
直接使用cdn包的形式，先學會怎麼用路由。

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

第二步：定義路由跳轉的元件

// 1. 定義（路由）元件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

第三步：定義路由規則物件

// 每個路由path應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 建立路由物件
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes，es6的新語法
})

第四步：建立Vue物件，並加重上面建立的路由物件

// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

第五步：在模板中編寫路由跳轉連結

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>

最終的程式碼：

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

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>
<script>
// 1. 定義（路由）元件。
// 可以從其他檔案 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
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')
</script>

使用vue-router的綜合例項

下面是一個綜合的例子, 頁面上有幾個導航的按鈕，然後通過點選不同的按鈕，可以在當前頁面切換不同的元件。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之extend全域性方法</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <style>
  ul, li { list-style: none; }
  ul { overflow: hidden; }
  li { float: left; width: 100px; }
  h2 { background-color: #903;}
  </style>
</head>
<body>
  <div id="app">
    <top-bar> </top-bar>
    <hr>
      <p>email to: {{ email }}</p> 
    <hr>
    <router-view class="view one"></router-view>
    <footer-bar></footer-bar>
  </div>
  <script>
    var topbarTemp = `
      <nav>
        <ul>
          <li v-for="item in NavList">
            <router-link :to="item.url">{{ item.name }}</router-link>
          </li>
        </ul>
      </nav>        
    `;
    // 定義元件：topbar
    Vue.component('top-bar', {          
      template: topbarTemp,
      data: function () {
        return {
          NavList: [
            { name: '首頁', url: '/home'},
            { name: '產品', url: '/product'},
            { name: '服務', url: '/service'},
            { name: '關於', url: '/about'}
          ]
        }
      }
    });             

    Vue.component('footer-bar', {  // 定義元件 footerbar
      template: `
        <footer>
          <hr/>
          <p>版權所有@flydragon<p>
        </footer>
      `
    });

    // 建立home模組
    var home = {
      template: `<div> <h2>{{ msg }}<h2></div>`,
      data: function () {
        return { msg: 'this is home view' }
      }
    };

    // 建立product 模組
    var product = {
      template: `<div> {{ msg }}</div>`,
      data: function () {
        return { msg: 'this is product view' }
      }
    }

    // 定義路由物件
    var router = new VueRouter({
      routes: [
        { path: '/home', component: home },
        { path: '/product', component: product }
      ]
    });

    // 初始化一個Vue例項
    var app = new Vue({         
      el: '#app',               
      data: {                   
       email: '[email protected]'
      },
      router: router
    });
  </script>
</body>
</html>

路由引數獲取（動態路由）

定義路由路徑的時候，可以指定引數。引數需要通過路徑進行標識：/user/:id就是定義了一個規則，/user開頭，然後後面的就是id引數的值。
比如：

路由規則：  /user/:id
/user/9   =>  id = 9
/user/8   =>  id = 8
/user/1   =>  id = 1

然後在跳轉後的vue中可以通過this.$route.params.引數名獲取對應的引數。
比如程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue入門之extend全域性方法</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <nav>
      <router-link to="/user/9">使用者</router-link>
      <router-link to="/stu/malun">學生</router-link>
      <hr>
    </nav>
    <router-view></router-view>
  </div>
  <script>
    var user = {
      template: `
        <div>user id is : {{ $route.params.id }}</div>
      `
    };

    var stu = {
      template: `
        <div>
          <h2>{{ getName }}</h2>
        </div>
      `,
      computed: {
        getName: function () {
          return this.$route.params.name;
        }
      }
    };
    var router = new VueRouter({
      routes: [
        { path: '/user/:id', component: user },
        { path: '/stu/:name', component: stu }
      ]
    });
    var app = new Vue({
      el: '#app',
      router: router
    });
  </script>
</body>
</html>

js控制路由跳轉

上面我們演示的都是通過router-link進行跳轉。其實我們還可以通過js程式設計的方式進行路由的跳轉。

// 當前路由的view跳轉到 /home
router.push('home')

// 物件,  跳轉到/home
router.push({ path: 'home' })

// 命名的路由   
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

巢狀路由

巢狀路由跟普通路由基本沒有什麼區別。但是可以讓vue開發變的非常靈活。
官網這塊寫的也非常好，我就直接拷貝了（原諒我吧。）
實際生活中的應用介面，通常由多層巢狀的元件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應巢狀的各層元件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
藉助 vue-router，使用巢狀路由配置，就可以很簡單地表達這種關係。

<div id="app">
  <router-view></router-view>
</div>
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
這裡的 <router-view> 是最頂層的出口，渲染最高階路由匹配到的元件。同樣地，一個被渲染元件同樣可以包含自己的巢狀 <router-view>。例如，在 User 元件的模板新增一個 <router-view>：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
要在巢狀的出口中渲染元件，需要在 VueRouter 的引數中使用 children 配置：

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

要注意，以 / 開頭的巢狀路徑會被當作根路徑。這讓你充分的使用巢狀元件而無須設定巢狀的路徑。
你會發現，children 配置就是像 routes 配置一樣的路由配置陣列，所以呢，你可以巢狀多層路由。

此時，基於上面的配置，當你訪問 /user/foo 時，User 的出口是不會渲染任何東西，這是因為沒有匹配到合適的子路由。如果你想要渲染點什麼，可以提供一個空的子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 當 /user/:id 匹配成功，
        // UserHome 會被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

總結

其實作為入門的話，暫時先掌握這些知識，後續

vue-router基礎知識

Vue-router的版本對應

vue-router的安裝使用

vue-router 入門demo

使用vue-router的綜合例項

路由引數獲取（動態路由）

js控制路由跳轉

巢狀路由

總結

vue-router基礎知識

vue.js基礎知識篇(4):過濾器、class與style的綁定2

vue.js基礎知識篇(3):計算屬性、表單控件綁定

vue.js基礎知識篇(8):與服務端通信

vue,js基礎知識

路由vue-router基礎

Vue-Router基礎學習筆記

Vue框架-基礎知識(vue指令、例項生命週期、計算屬性與監聽屬性、插槽理解、元件介紹、資料互動、ES6語法等)

vue入門基礎知識

react-router基礎知識

vue.js基礎知識整理

vue.js基礎知識篇(4):過濾器、class與style的繫結2

[Vue 牛刀小試]：第十三章 - Vue Router 基礎使用再探（命名路由、命名檢視、路由傳參）

解析Vue-router相關基礎知識及工作原理

vue2.X基礎知識八之vue-router路由

Vue.js 運行環境搭建詳解（基於windows的手把手安裝教學）及vue、node基礎知識普及

轉：vue-router 2.0 常用基礎知識點之router.push()

vue基礎知識之vue-resource/axios

Vue基礎知識

Vue基礎知識總結（二）

vue-router基礎知識

Vue-router的版本對應

vue-router的安裝使用

vue-router 入門demo

使用vue-router的綜合例項

路由引數獲取（動態路由）

js控制路由跳轉

巢狀路由

總結

相關推薦