亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

我的購物車

已加入門課程

購物車里空空如也

快去這里選購你中意的課程

我的訂單中心

全部開發者教程

Vue 入門教程

前言

課程簡介 Vue的安裝

Vue 基礎

Vue 實例 Vue 常用指令 Vue 動態樣式綁定 Vue 計算屬性 Vue 偵聽器 Vue 事件處理 Vue過渡 & 動畫 Vue 數據雙向綁定 Vue 實例生命周期 Vue 組件基礎 Vue 插槽的使用 Vue 組件間通信 Vue動態組件 & keep-alive

Vue 高級

Vue 混入 Mixins Vue 自定義指令 Vue 過濾器 Vue 渲染函數 Vue 插件

VueRouter

VueRouter 基礎應用 VueRouter 路由嵌套 VueRouter 編程式導航 VueRouter 命名路由 VueRouter 命名視圖 VueRouter 路由別名、重定向 VueRouter 路由傳參

Vuex

Vuex 簡介、安裝 Vuex State Vuex Getter Vuex Mutation Vuex Action Vuex Modules

Vue 工程化

Vue-Cli & VueDevTools安裝 Vue-Cli 項目文件結構分析 Vue 第三方庫的使用 Vue 本地 Mock 數據 Element 美化 TODO 項目 Vue 項目打包部署

首頁慕課教程 Vue 入門教程 VueRouter 路由別名、重定向

此間少年_ · 更新于 2020-06-02

上一節

VueRouter 命名視圖

VueRouter 路由傳參

下一節

VueRouter路由別名、重定向

1. 前言

本小節我們介紹如何使用 VueRouter 路由別名、重定向。路由別名和重定向在項目中經常使用，本節的學習內容相對簡單，相信同學們看完本小節，并對小節中的案例自己實現一遍就可以熟練掌握了。

2. 路由重定向

重定向也是通過 routes 配置來完成，可以配置路由重定向到具體路由地址、具名路由或者動態返回重定向目標。

2.1 重定向到路由地址

通過屬性 redirect 指定重定向的路由地址：

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

示例：

實例演示

預覽復制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/index">首頁</router-link>
      <router-link to="/article">文章</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

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

const Index = Vue.component('index', {
  template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})

const Article = Vue.component('myArticle', {
  template: `<ul><li>1. Vue 計算屬性的學習</li><li>2. React 基礎學習</li></ul>`,
})

const routes = [
  { path: '/', redirect: '/index' },
  { path: '/index', component: Index },
  { path: '/article', component: Article }
]

const router = new VueRouter({
  routes: routes
})

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

運行案例點擊 "運行案例" 可查看在線運行效果

代碼解釋：
HTML 代碼第 12-13 行，我們定義了兩個跳轉鏈接。
HTML 代碼第 15 行，我們使用 <router-view></router-view> 組件來渲染匹配組件。
JS 代碼第 5-7 行，我們定義了組件 Index。
JS 代碼第 9-11 行，我們定義了組件 Article。
JS 代碼第 13-17 行，我們定義了路由數組：

根路由，地址為 ‘/’，重定向到路由地址 ‘/index’。
首頁路由，地址為 ‘/index’，匹配組件 Index。
文章路由，地址為 ‘/article’，匹配組件 Article。

JS 代碼第 19-21 行，創建 router 實例，然后傳 routes 配置。
JS 代碼第 25 行，通過 router 配置參數注入路由。

2.2 重定向到具名路由

通過屬性 redirect 重定向到具名路由：

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

示例：

實例演示

預覽復制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/index">首頁</router-link>
      <router-link to="/article">文章</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

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

const Index = Vue.component('index', {
  template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})

const Article = Vue.component('myArticle', {
  template: `<ul><li>1. Vue 計算屬性的學習</li><li>2. React 基礎學習</li></ul>`,
})

const routes = [
  { path: '/', redirect: {name: 'index'} },
  { path: '/index', name: 'index', component: Index },
  { path: '/article', name: 'article', component: Article }
]

const router = new VueRouter({
  routes: routes
})

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

運行案例點擊 "運行案例" 可查看在線運行效果

代碼解釋：
HTML 代碼第 12-13 行，我們定義了兩個跳轉鏈接。
HTML 代碼第 15 行，我們使用 <router-view></router-view> 組件來渲染匹配組件。
JS 代碼第 5-7 行，我們定義了組件 Index。
JS 代碼第 9-11 行，我們定義了組件 Article。
JS 代碼第 13-17 行，我們定義了路由數組：

根路由，地址為 ‘/’，重定向到具名路由 ‘index’。
首頁路由，地址為 ‘/index’，匹配組件 Index。
文章路由，地址為 ‘/article’，匹配組件 Article。

JS 代碼第 19-21 行，創建 router 實例，然后傳 routes 配置。
JS 代碼第 25 行，通過 router 配置參數注入路由。

2.3 動態返回重定向目標

屬性 redirect 可以接收一個方法，動態返回重定向目標：

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

示例：

實例演示

預覽復制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/index">首頁</router-link>
      <router-link to="/article">文章</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

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

const Index = Vue.component('index', {
  template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})

const Article = Vue.component('myArticle', {
  template: `<ul><li>1. Vue 計算屬性的學習</li><li>2. React 基礎學習</li></ul>`,
})

const routes = [
{ path: '/', redirect: to => {
  if(Math.random() > 0.5) {
    return '/index'
  }else {
    return {
      name: 'article'
    }
  }
}},
  { path: '/index', name: 'index', component: Index },
  { path: '/article', name: 'article', component: Article }
]

const router = new VueRouter({
  routes: routes
})

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

運行案例點擊 "運行案例" 可查看在線運行效果

代碼解釋：
HTML 代碼第 12-13 行，我們定義了兩個跳轉鏈接。
HTML 代碼第 15 行，我們使用 <router-view></router-view> 組件來渲染匹配組件。
JS 代碼第 5-7 行，我們定義了組件 Index。
JS 代碼第 9-11 行，我們定義了組件 Article。
JS 代碼第 13-25 行，我們定義了路由數組：

根路由，地址為 ‘/’，根據隨機數的大小重定向到路由 ‘/index’ 或 ‘/article’。
首頁路由，地址為 ‘/index’，匹配組件 Index。
文章路由，地址為 ‘/article’，匹配組件 Article。

JS 代碼第 27-29 行，創建 router 實例，然后傳 routes 配置。
JS 代碼第 32 行，通過 router 配置參數注入路由。

3. 路由別名

“重定向”的意思是，當用戶訪問 /a 時，URL 將會被替換成 /b，然后匹配路由為 /b，那么“別名”又是什么呢？
/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。

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

示例：

實例演示

預覽復制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/index">首頁</router-link>
      <router-link to="/article">文章</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

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

const Index = Vue.component('index', {
  template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})

const Article = Vue.component('myArticle', {
  template: `<ul><li>1. Vue 計算屬性的學習</li><li>2. React 基礎學習</li></ul>`,
})

const routes = [
  { path: '/index', component: Index, alias: '/' },
  { path: '/article', component: Article }
]

const router = new VueRouter({
  routes: routes
})

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

運行案例點擊 "運行案例" 可查看在線運行效果

代碼解釋：
HTML 代碼第 12-13 行，我們定義了兩個跳轉鏈接。
HTML 代碼第 15 行，我們使用 <router-view></router-view> 組件來渲染匹配組件。
JS 代碼第 5-7 行，我們定義了組件 Index。
JS 代碼第 9-11 行，我們定義了組件 Article。
JS 代碼第 13-16 行，我們定義了路由數組：

首頁路由，地址為 ‘/index’，匹配組件 Index，路由別名 ‘/’。
文章路由，地址為 ‘/article’，匹配組件 Article。

JS 代碼第 18-20 行，創建 router 實例，然后傳 routes 配置。
JS 代碼第 24 行，通過 router 配置參數注入路由。

4. 小結

本節，我們帶大家學習了 VueRouter 路由重定向和別名。主要知識點有以下幾點：

通過 redirect 屬性指定路由重定向地址。
通過 alias 屬性配置路由別名。

上一節

VueRouter 命名視圖

下一節

VueRouter 路由傳參

我要提出意見反饋

索引目錄

VueRouter路由別名、重定向

2. 路由重定向

2.1 重定向到路由地址

2.2 重定向到具名路由

2.3 動態返回重定向目標

3. 路由別名

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

掃描二維碼
關注慕課網微信公眾號