vue.js路由vue-router（一）——簡單路由基礎

時間 2019-11-08

標籤 vue.js vue 路由 router 簡單基礎欄目 JavaScript 简体版

原文原文鏈接

前言

vue.js除了擁有組件開發體系以外，還有本身的路由vue-router。在沒有使用路由以前，咱們頁面的跳轉要麼是後臺進行管控，要麼是用a標籤寫連接。使用vue-router後，咱們能夠本身定義組件路由之間的跳轉，還能夠設置稍複雜的嵌套路由，建立真正的spa（單頁面應用）。我以前用vue-cli腳手架寫了一個簡單的人員管理實例，如今咱們不用腳手架，就用原生的vue來寫，本文也主要是經過實例來說解vue.js+vue-router相關知識。css

簡單路由跳轉實例

1.起步

下載vue-router.js，新建項目文件夾命名爲router，將下載的vue-router.js放在router/js/路徑下。新建index.html做爲主頁，引入樣式文件，引入兩個關鍵的js，vue和vue-router，再在body標籤底部引入一個main.js用來寫vue實例及配置路由，注意引用順序。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
     <div id="app"></div>
     <template></template> //組件區域
     <script src="js/main.js"></script>
</body>
</html>

2.定義路由視圖

調用foot-nav組件，將底部導航組件引入在這裏，是由於兩個路由頁面都要用到它vue

<div id="app">
    <router-view></router-view>
    <foot-nav></foot-nav>
</div>

知識點:：<router-view>

<router-view>標籤至關於一個插槽，用於將匹配到的組件渲染出來，一個個路由定義的組件至關於卡，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示。
一個組件能夠有多個<router-view>視圖，並用name值去區分它們，這種多用在網頁佈局方面，如上左主結構，這個時候就能夠定義三個<router-view>
示例vue-router

<div id="app">
    <router-view name="top"></router-view>
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>

<script>
    var topCom = Vue.extend({
        template: '<div>頂部</div>'
    })

    var leftCom = Vue.extend({
        template: '<div>側邊欄</div>'
    })

    var mainCom = Vue.extend({
        template: '<div>主頁</div>'
    })

    var router = new VueRouter({
        routes:[
            {
                path: '/',
                name: 'home',
                components:{
                    top: topCom,
                    left: leftCom,
                    main: mainCom
                }
            }
        ]
    })

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

再爲各個板塊設置一下樣式，打開瀏覽器查看效果vue-cli

3.子組件（底部導航）

3.1 建立子組件

人員管理系統分爲兩個模塊，一個首頁，一個管理頁，兩個頁面都需引入一個公共組件：底部導航。在首頁index.html中加入如下模板瀏覽器

<template id="footer">
    <div class="footer fixed">
        <ul>
            <li><router-link to="/">首頁</router-link></li>
            <li><router-link :to="{name:'manage',params:{id:1}}">人員管理</router-link></li>
        </ul>
    </div>
</template>

知識點:：<router-link>

<router-link>標籤主要實現跳轉連接功能，屬性to='/'便是跳轉到path爲'/'的路徑（咱們等會得配置路徑爲'/'和'/manage'的路由）
router-link除了能夠跳轉連接以外，還能夠傳參，能夠傳多個參數，通常格式爲app

<router-link to="路由路徑"></router-link>

<router-link :to="{ path:路由路徑}"></router-link>

<router-link :to="{name:'路由命名',params:{參數名:參數值,參數名:參數值}}"></router-link>

知識點：this.$router.push

若是不想用<router-link>標籤，也能夠給須要跳轉的地方添加一個點擊事件，在事件裏寫this.$router.push方法佈局

this.$router.push('路由路徑')

this.$router.push({name:'路由命名',params:{參數名:參數值,參數名:參數值}})

3.2 註冊子組件

在main.js中全局註冊子組件而且定義vue實例this

Vue.component('foot-nav',{
    template: '#footer'
})

var app = new Vue({
    el: '#app'
})

4.首頁及管理頁組件

4.1 建立首頁及管理頁

<template id="index">
    <div>
        首頁
    </div>
</template>

<template id="manage">
    <div>
        人員管理
        <p>id:{{id}}</p>
    </div>
</template>

4.2 註冊主頁及管理頁

var Home = Vue.extend({
    template: '#index'
})

var Manage = Vue.extend({
    template: '#manage',
    data(){
        return{
            id: ''
        }
    },
    mounted:function(){
        this.id = this.$route.params.id
    }
})

知識點：this.$route.params

this.$route指向vue實例的路由，params是路由傳過來的參數集合spa

5.定義路由

定義路由router，並引進vue實例中

var router = new VueRouter({
    routes:[
        {
            path:'/',
            name: 'home',
            component:Home
        },
        {
            path:'/manage/:id',
            name: 'manage',
            component:Manage
        }
    ]
})

var app = new Vue({
    el: '#app',
    router
})

知識點：path:'/路徑/:參數名'

一個路由要傳參時，需在path路徑後面添加一個‘/’並加上冒號和參數名

知識點：路由激活class

vue-router當路由處於激活狀態時，會有一個class類「router-link-exact-active」，咱們只需爲這個類添加樣式就能夠實現路由激活狀態下的樣式編寫
接下來去瀏覽器查看路由跳轉效果

6.嵌套路由

有時咱們項目由多層嵌套組件組成，這個時候就須要用到嵌套路由
先看下圖例子，咱們給manage路由再添加兩個子路由

6.1 在組件內部添加<router-view>

<template id="manage">
    <div>
        人員管理
        <ul>
            <li><router-link to="/manage/list">人員列表</router-link></li>
            <li><router-link to="/manage/edit">編輯</router-link></li>
        </ul>
        <router-view></router-view>
    </div>
</template>

6.2 定義子路由

//構建組件
var List = Vue.extend({
    template: '<div>人員列表</div>'
})

var Edit = Vue.extend({
    template: '<div>編輯</div>'
})



var router = new VueRouter({
    routes:[
        {
            path:'/',
            name: 'home',
            component:Home
        },
        {
            path:'/manage',
            name: 'manage',
            component:Manage,
        //子路由由children表示
            children:[
                {
                    path:'list',
                    name: 'list',
                    component:List
                },
                {
                    path:'edit',
                    name: 'edit',
                    component:Edit
                }
            ]
        }
    ]
})

7.路由重定向

未設置路由重定向時，當咱們隨意輸入一個路徑，會顯示一片空白或404。爲了防止這種現象發生，咱們通常在配置路由時再定義一個重定向路由

var router = new VueRouter({
    routes:[
        {
            path:'/',
            name: 'home',
            component:Home
        },
        {
            path:'*',
            redirect: '/'
        },
    ]
})

打開瀏覽器，隨意輸入一個未定義的路由查看效果