iView基礎學習-基礎路由

一、基礎知識梳理

（1）router-link和router-view元件

（2）路由配置

A、動態路由

B、巢狀路由

C、命名路由

D、命名檢視

（3）JS路由操作

（4）重定向與別名

二、router-link和router-view元件

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

程式碼解釋：

router-link 標籤，將來會渲染成 a 標籤，其中 to 後面是一個 路徑 ，用於 指示路由跳轉 。

router-view 標籤，路由切換後，會顯示在 router-view 下面。

三、路由配置

A、動態路由

在路由配置檔案 router.js 中，我們進行動態路由配置，可以 實現路由的複用 。具體做法是在路由的後面拼接 引數 。具體如下：

{
    path: '/argu/:name',
    component: () => import ('@/views/argu.vue')
}

其中，name 就是傳入的引數，在對應的元件 argu.vue

頁面顯示效果：

  <div>
    {{$route.params.name}}
  </div>

其中，$route 表示當前路由，params 表示物件引數，name 表示動態路由引數，亦即 params 物件總的 key 值。

B、巢狀路由