vue-router 的基本使用方式

時間 2019-12-07

標籤 vue router 基本使用方式简体版

原文原文鏈接

1.起步html

npm install --save vue-router
在項目中使用時，經過以下方式便可vue

import Vue from 'vue'
import VueRouter from 'vue-router'
//安裝 Vue 的 VueRouter 插件
Vue.use(VueRouter)
//建立實例，進行配置
new VueRouter({
    //...
})

2.路由映射git

//router-link 組件實現導航
//to 屬性主要用於指定連接
<router-link to="/home">to home</router-link>

會被渲染爲github

<a href="/home">to home</a>

3.路由出口vue-router

//路由匹配到的組件會被渲染到這
<router-view></router-view>

4.定義路由組件
首先先明確一點，通常狀況下一個路由就映射一個組件。npm

const routes = [
    path: '/',
    component: require('./app.vue'),
    //這些組件會映射到 app.vue 中的 router-view 中
    children: [
        {
            path: '/',
            component: require('./home.vue')
        },
        {
            path: '/questions',
            component: require('./questions.vue'),
            name: 'questions', // 命名路由
            //路由元信息
            meta: {
                correctNum: 0
            }
        },
        {
            path: 'score',
            component: require('../page/score'),
            name: 'score',
            // 導航鉤子，能夠傳遞兩個路由間的數據
            beforeEnter (to, from, next) {
                to.meta.correctNum = from.meta.correctNum
                next()
            }
        }
    ]
]

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes
})

new Vue({
    //...
    router
})

上面的這個路由配置就對應以下app

//app.vue中
<template>
    <div>
        <!--children 配置中的組件會映射到這裏-->
        <router-view></router-view>
    </div>
<template>

而最高層級的路由，將會被映射到最頂層的出口，即 index.html 中ui

<body>
    <div>
        <router-view></router-view>
    </div>
</body>

以上，就是 vue-router 的基本使用方式，不正確的地方歡迎指出。我也作了一個小 demo，詳見 Github。插件

相關標籤/搜索

每日一句

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