Vue開發之基礎路由

renpingsheng發表於2019-05-19

1.router-link和router-view元件

src/App.vie檔案內容：

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

在App.vue檔案程式碼裡有2個router-link元件和1個router-view元件

router-link元件實際上是封裝了一個a標籤，裡面有一個重要的to屬性，to屬性指定的值是一個路徑
router-link標籤中有內容渲染，所以router-link標籤有開標籤和閉標籤
router-view元件是檢視渲染元件，通過router-link的to屬性載入的元件都會在router-view裡被渲染
router-view標籤中沒有內容渲染，所以router-view標籤可以寫成 <router-view/> 單標籤的形式，這與  <router-view></router-view> 效果相同

router-link的to屬性指定的路徑就是src/router/router.js檔案中定義的路由

import Home from '@/views/Home.vue'         // 引入Home.vue檔案並設定引入名稱為Home,@標籤是在vue.config.js檔案中定義的src路徑的別名

export default [                // 路由列表是一個陣列，在這個陣列中定義了路由物件
{                               // 一個基本的路由物件包含path和component這兩個屬性
        path: '/',              // path屬性是在瀏覽器中輸入的跳轉路徑
        component: Home,        // component屬性是指定要載入渲染的元件名稱
    }, {
        path: '/about',
        // 這裡定義的是懶載入路由，即只有當訪問這個路由時，才會載入 src/views/About.vue這個元件
        component: () => import('@/views/About.vue'),       
    }
]

2.路由配置

2.1 動態路由

在src/router/router.js中新建一個路由物件

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        component: Home,
    }, {
        path: '/about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',     // 動態路由
        component:() => import('@/views/argu.vue')
    }
]

在src/views目錄中建立argu.vue檔案

argu.vue檔案內容如下

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

<script>
export default {
    
}
</script>

在瀏覽器中輸入URL: http://localhost:8080/#/argu/apple，頁面上會渲染URL中對應的引數

Vue開發之基礎路由

同樣的，當URL改成：http://localhost:8080/#/argu/orange時，頁面上渲染的結果也相應改變了

Vue開發之基礎路由

在上面的例子裡，$route代表的是當前載入頁面的路由物件，$route.params代表當前載入頁面中的引數物件

所以$route.params.name表示的就是當前載入頁面的引數物件中的name對應位置上的的值

不管瀏覽器的URL中輸入的是name值是什麼，$route.params.name都會被匹配到

這樣就可以起到元件複用，只需要傳遞不同的引數，同一個頁面就可以呈現不同的結果

2.2 巢狀路由

在實際開發中，經常會用到多層巢狀的元件，多層巢狀元件可以通過巢狀路由來完成

修改src/router/router.js檔案，新建巢狀路由

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        component: Home,
    }, {
        path: '/about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',         // 巢狀路由
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    }
]

然後在src/views目錄下新建parent.vue檔案和child.vue檔案

parent.vue檔案內容如下

<template>
    <div>
        I am parent page
        <router-view/>
    </div>
</template>

<script>
export default {
    
}
</script>

child.vue檔案內容如下

<template>
    <div>
        I am child page
    </div>
</template>

<script>
export default {
    
}
</script>

瀏覽器開啟URL：http://localhost:8080/#/parent/child，渲染結果如下

Vue開發之基礎路由

2.3 命名路由

修改src/router/router.js檔案，為路由命名

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',           // 命名路由
        component: Home,
    }, {
        path: '/about',
        name: 'about',          // 命名路由
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    }
]

修改App.vue檔案，在router-link標籤中使用name來繫結路由名

<template>
    <div id="app">
    <div id="nav">
        <router-link v-bind:to="{ name:'home'}">Home</router-link> |
        <router-link :to="{ name:'about'}">About</router-link>
    </div>
    <router-view/>
    </div>
</template>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}

#nav a.router-link-exact-active {
    color: #42b983;
}
</style>

v-bind:to 方法可以簡寫成： :to

使用瀏覽器訪問URL：http://localhost:8080/#/,在頁面上點選Home和About標籤，可以正常的渲染

2.4 命名檢視

如果想在同一個頁面上顯示多個檢視，並分別對不同的檢視進行佈局時，可以在div標籤中定義多個router-view標籤，併為每個router-view標籤定義名字，這就是命名檢視

修改src/App.vue檔案，新增兩個命名檢視view1和view2

<template>
    <div id="app">
    <div id="nav">
        <router-link v-bind:to="{ name:'home'}">Home</router-link> |
        <router-link :to="{ name:'about'}">About</router-link>
    </div>
    <router-view/>
    <router-view name="view1"/>    // 新增router-view標籤，並把名字定義為view1
    <router-view name="view2"/>    // 新增router-view標籤，並把名字定義為view2
    </div>
</template>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}

#nav a.router-link-exact-active {
    color: #42b983;
}
</style>

然後修改src/router/router.js檔案，在新新增的路由中新增兩個命名檢視

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home,
    }, {
        path: '/about',
        name: 'about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    },{
        path:'/named_view',     // 命名檢視
        components:{
            // default會預設載入App.vue中沒有命名的檢視
            default: () => import('@/views/child.vue'),
            view1: () => import('@/views/view1.vue'),
            view2: () => import('@/views/view2.vue'),
        }
    }
]

然後在src/views目錄下新增view1.vue和view2.vue檔案

view1.vue檔案內容為

<template>
    <div>
        I am view1
    </div>
</template>

view2.vue檔案內容為

<template>
    <div>
        I am view2
    </div>
</template>

在瀏覽器中開啟URL；http://localhost:8080/#/named_view

Vue開發之基礎路由

在瀏覽器中安裝 Vue Devtool外掛，可以看到頁面上渲染了3個router-view元件

Vue開發之基礎路由

2.5 重定向路由

重定向路由的作用是把當前要訪問的URL重定向到另一個URL

修改src/router/router.js檔案，新增重定向路由

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home,
    }, {
        path: '/about',
        name: 'about',
        // route level code-splitting
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    },{
        path:'/about_path',     // 重定向路由
        redirect:'about'
    }
]

當使用瀏覽器訪問URL:http://localhost:8080/#/about_path時，就會跳轉到路由名為 about的路由上去，即訪問了/about路由

在重定向路由中，也可以使用命名路由的方式

即把/about_path修改成使用命名路由的重定向方式

{
    path: '/about_path',
    redirect: {
        name:'about'
    }
}

在重定向的redirect中，也可以傳入一個函式

修改about_path路由

{
    path: '/about_path',
    redirect: to => {
        console.log(to) // 列印出傳入的to函式
    }
}

瀏覽器開啟URL：http://localhost:8080/#/about_path，在除錯樣中檢視列印出的結果

Vue開發之基礎路由

修改about_path路由，在redirect中定義函式體

{
    path: '/about_path',
    redirect: to => {
        return{
            name:'home'
        }
    }
}

重新整理瀏覽器，頁面就跳轉到home頁面了

redirect中定義的to函式也可以返回一個路由路徑

{
    path: '/about_path',
    redirect: to => {
        return '/named_view'
    }
}

此時開啟URL：http://localhost:8080/#/about_path，頁面就會跳轉到/named_view頁面中

上面redirect中的函式體可以簡寫成

{
    path: '/about_path',
    redirect: to => '/named_view'
}

2.6 路由別名

路由別名，顧名思義就是為一個路由設定一個別名，設定別名以後即可以通過路由的path的值進行訪問，也可以通過別名訪問這個路由

修改src/router/router.js檔案，為名為"home"的路由設定別名

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',
        alias:'/home_page',
        component: Home,
    }, {
        path: '/about',
        name: 'about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    },{
        path:'/named_view',
        components:{
            default: () => import('@/views/child.vue'),
            view1: () => import('@/views/view1.vue'),
            view2: () => import('@/views/view2.vue'),
        }
    }, {
        path: '/about_path',
        redirect: to => '/named_view'
    }
]

這樣不管訪問URL：http://localhost:8080/#/，還是URL：http://localhost:8080/#/home_page，都可以訪問到指定的檢視了

Vue開發之基礎路由

2.7 JS操作路由

JS操作路由就是通過JS控制頁面的跳轉和返回

首先修改src/views/Home.vue檔案，在頁面上新增一個button按鈕，button按鈕的值為"返回上一頁"，button點選事件為"handleClick"

<template>
    <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button @click="handleClick">返回上一頁</button>    // 新新增的button按鈕
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
    name: 'home',
    components: {
        HelloWorld
    },
    methods:{
        handleClick () {
            this.$router.back()
        }
    }
}
</script>

瀏覽器開啟URL：http://localhost:8080/#/，點選About標籤跳轉到about頁面

Vue開發之基礎路由

然後再點選Home標籤，跳轉到home頁面

點選"返回上一頁"按鈕，頁面返回到當前頁的上一頁，即about頁面了

Vue開發之基礎路由

返回上一頁的JS語句也可以寫成：

handleClick () {
    this.$router.go(-1)
}

或者跳轉到指定頁面：

handleClick () {
    this.$router.push({
        name:'about',
    })
}

跳轉到指定頁面的同時需要在URL上新增引數時，可以加query選項

handleClick () {
    this.$router.push({
        name:'about',
        query:{
            name:'orange',
            price:'5'
        }
    })
}

在home頁點選"返回上一頁"時，URL會跳轉到about頁面，並在URL上新增query中定義的引數

Vue開發之基礎路由

跳轉到前面定義的/argu這個路由

先在src/router/router.js檔案中，為/argu這個路由新增名字

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

然後修改src/views/Home.vue檔案中的handleClick方法

handleClick () {
    this.$router.push({
        name:'argu',
        params:{
            name:'orange',
        }
    })
}

在home頁點選"返回上一頁"時，URL會跳轉到about頁面

Vue開發之基礎路由

上面的方法也可以用ES6的語法重寫，也可以達到同樣的效果

handleClick () {
    const name = 'banana'
    this.$router.push({
        path:`/argu/${name}`    // 這裡的 ` 是鍵盤上Ese下面的那個鍵
    })
}

或者

handleClick () {
    this.$router.push({
        name:`argu`,
        params:{
            name:'banana'
        }
    })
}

在home頁點選"返回上一頁"時，瀏覽器頁面顯示為

Vue開發之基礎路由

vue-router路由基礎
2019-04-28
Vue路由
基於vue開發活動頁-路由相關
2019-02-28
Vue路由
Vue 系列一之 Vue 基礎
2019-01-13
Vue
Angular路由——路由基礎
2018-05-07
Angular路由
開心檔之Vue.js 路由
2023-03-02
Vue.js路由
【Flutter】開發之基礎Widget（二）
2019-05-20
Flutter
Android NDK開發之JNI基礎
2019-03-16
Android
Vue開發之路由進階
2019-05-26
Vue路由
vue 基礎入門筆記 18:路由巢狀
2019-08-19
Vue筆記路由巢狀
React路由（基礎）
2018-12-26
React路由
Flutter開發之Dart語言基礎
2019-07-25
FlutterDart
Flutter開發之Dart語法基礎
2019-02-19
FlutterDart
HarmonyOS NEXT 開發之ArkTS基礎入門
2024-10-10
React Native開發之必備React基礎
2019-03-04
React Native
小程式開發之基礎知識（0）
2018-08-10
web_前端開發JS框架篇-Vue基礎入門版-基礎語法
2020-11-09
Web前端JS框架Vue
vue2.0學習筆記（八）：vue-router 路由配置（1）–基礎篇
2018-04-23
Vue筆記路由
搭建自己的 vue 元件庫（一） —— vue 外掛開發基礎知識
2018-09-07
Vue元件
提高開發效率之VS Code基礎配置篇
2019-02-16
java web 之網頁前端開發基礎（1）
2018-08-02
JavaWeb網頁前端
vue 基礎入門筆記 16:路由的使用和重定向
2019-08-19
Vue筆記路由
Swift Web 開發之 Vapor – 路由（二）
2019-02-14
SwiftWebVapor路由
Vue開發者必會的基礎知識盤點
2020-07-19
Vue
VUE基礎
2024-08-17
Vue
Express基礎瞭解—路由
2018-07-25
Express路由
PHP 開發基礎
2021-03-22
PHP
豬行天下之Python基礎——1.3 Python開發IDE之PyCharm
2019-04-02
PythonIDEPyCharm
Vue.js 學習筆記之四：Vue 元件基礎
2020-10-12
Vue.js筆記元件
03 . Vue基礎之計算屬性,元件基礎定義和使用
2020-11-14
Vue元件
030、Vue3+TypeScript基礎，路由中History和HashHistory的區別
2024-08-18
VueTypeScript路由
032、Vue3+TypeScript基礎，巢狀子路由和query傳參
2024-08-19
VueTypeScript巢狀路由
vue 基礎入門筆記 17:路由傳參的兩種方式
2019-08-19
Vue筆記路由
基於gin的golang web開發：路由
2020-10-21
GolangWeb路由
Flutter開發之導航與路由管理
2019-08-03
Flutter路由
Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步
2019-02-13
Vue
交換機及路由基礎
2022-05-08
路由
Flutter - 路由管理 - 01 - 基礎使用
2019-06-12
Flutter路由
Django基礎之二（URL路由）
2018-11-07
Django路由

Vue開發之基礎路由

1.router-link和router-view元件

2.路由配置

2.1 動態路由

2.2 巢狀路由

2.3 命名路由

2.4 命名檢視

2.5 重定向路由

2.6 路由別名

2.7 JS操作路由

相關文章