vue-router的一個小實例

時間 2019-11-21

標籤 vue router 一個實例简体版

原文原文鏈接

非2.0的javascript

vue2.0還有vue-router2.0的改變仍是挺大的css

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超連接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。html

如今以一個簡單的單頁面應用開啓vue-router之旅，這個單頁面應用有兩個路徑：/home和/about，與這兩個路徑對應的是兩個組件Home和About。vue

1. 建立組件

首先引入vue.js和vue-router.js：java

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

而後建立兩個組件構造器Home和About：vue-router

// 定義組件
var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})
var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

2. 建立Router

var router = new VueRouter()

調用構造器VueRouter，建立一個路由器實例router。app

3. 映射路由

router.map({
    '/home': {
        component: Home
    },
    '/about': {
        component: About
    }
})

調用router的map方法映射路由，每條路由以key-value的形式存在，key是路徑，value是組件。
例如：'/home'是一條路由的key，它表示路徑；{component: Home}則表示該條路由映射的組件。函數

4. 使用v-link指令

<div class="content">
    <!-- 使用指令 v-link 進行導航。 -->
    <a class="select" v-link="{ path: '/home' }">Home</a>
    <a class="select" v-link="{ path: '/about' }">About</a>
</div>

在a元素上使用v-link指令跳轉到指定路徑。spa

5. 使用<router-view>標籤

<router-view></router-view>

在頁面上使用<router-view></router-view>標籤，它用於渲染匹配的組件。.net

6. 啓動路由

var App = Vue.extend({})

router.start(App, '#app')

路由器的運行須要一個根組件，router.start(App, '#app') 表示router會建立一個App實例，而且掛載到#app元素。
注意：使用vue-router的應用，不須要顯式地建立Vue實例，而是調用start方法將根組件掛載到某個元素。

http://blog.csdn.net/sinat_17775997/article/details/52549123

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%
        }
        #app{
            width: 60%;
            height: 100%;
            margin: 0 auto;
        }
        .content{
            width: 300px;
            height: 50px;
        }
        .select{
            display: inline-block;
            line-height: 50px;
            padding: 0 30px;
            font-size: 20px;
            background-color: #ffffff;
            border: 1px solid #ecf0f1;
            text-align: center;
            color: #555555;
            text-decoration:none;
        }
    </style>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1 class="title">Welcome!</h1>
        <div class="content">
            <!-- 使用指令 v-link 進行導航。 -->
            <a class="select" v-link="{ path: '/home' }">Home</a>
            <a class="select" v-link="{ path: '/about' }">About</a>
        </div>
        <!-- 路由外鏈 -->
        <router-view></router-view>
    </div>
    <script type="application/javascript">
        // 定義組件
        var Home = Vue.extend({
            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
            data: function() {
                return {
                    msg: 'Hello, vue router!'
                }
            }
        })
        var About = Vue.extend({
            template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
        })

        // 建立一個路由器實例
        // 建立實例時能夠傳入配置參數進行定製，爲保持簡單，這裏使用默認配置
        var router = new VueRouter()

        // 定義路由規則
        // 每條路由規則應該映射到一個組件。這裏的「組件」能夠是一個使用 Vue.extend
        // 建立的組件構造函數，也能夠是一個組件選項對象。
        router.map({
            '/home': {
                component: Home
            },
            '/about': {
                component: About
            }
        })

        router.redirect({
            '/': '/home'
        })

        // 路由器須要一個根組件。
        // 出於演示的目的，這裏使用一個空的組件，直接使用 HTML 做爲應用的模板
        var App = Vue.extend({})
        
        // 啓動應用！
        // 路由器會建立一個 App 實例，而且掛載到選擇符 #app 匹配的元素上。
        router.start(App, '#app')
    </script>
</body>
</html>

1. vue+vueRouter 實例demo
2. linux awk一個小小的實例
3. Ipopt 的一個小實例的編譯
4. 一個使用Dictionary的小實例
5. 一個簡單的Android小實例
6. VueRouter
7. 一個JSONP的小案例
8. CapsuleNet的一個小例子
9. 一個JAVABean的小例子
10. date的一個小例子
更多相關文章...
• XML DOM 實例 - XML DOM 教程
• XML 實例 - XML 教程
• Docker容器實戰(一) - 封神Server端技術
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。