Vue開發之基礎路由

時間  2019-12-10
標籤 vue 開發 基礎 路由 欄目 系統網絡 简体版
原文   原文鏈接

1.router-link和router-view組件

src/App.vie文件內容：vue

<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組件web

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文件app

argu.vue文件內容以下函數

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

<script>
export default {
    
}
</script>

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

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

在上面的例子裏，$route表明的是當前加載頁面的路由對象，$route.params表明當前加載頁面中的參數對象插件

因此$route.params.name表示的就是當前加載頁面的參數對象中的name對應位置上的的值3d

無論瀏覽器的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，渲染結果以下

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 Devtool插件，能夠看到頁面上渲染了3個router-view組件

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，在調試樣中查看打印出的結果

修改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，均可以訪問到指定的視圖了

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頁面

而後再點擊Home標籤，跳轉到home頁面

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

返回上一頁的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中定義的參數

跳轉到前面定義的/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頁面

上面的方法也能夠用ES6的語法重寫，也能夠達到一樣的效果

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

或者

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

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程