vue-router 的基础运用体式格局

2024年1月4日 231次阅读 来源: Hunter_Gu

  • 1.起步

npm install –save vue-router
在项目中运用时，经由过程以下体式格局即可

import Vue from 'vue'
import VueRouter from 'vue-router'
//装置 Vue 的 VueRouter 插件
Vue.use(VueRouter)
//建立实例，举行设置
new VueRouter({
    //...
})

  • 2.路由映照

//router-link 组件完成导航
//to 属性重要用于指定链接
<router-link to="/home">to home</router-link>

会被衬着为

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

  • 3.路由出口

//路由匹配到的组件会被衬着到这
<router-view></router-view>

  • 4.定义路由组件
      起首先明白一点，平常状况下一个路由就映照一个组件。

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.vue中
<template>
    <div>
        <!--children 设置中的组件会映照到这里-->
        <router-view></router-view>
    </div>
<template>

而最高层级的路由，将会被映照到最顶层的出口，即 index.html 中

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

  以上，就是 vue-router 的基础运用体式格局，不正确的处所迎接指出。我也做了一个小 demo，详见 Github。

    原文作者：Hunter_Gu
    原文地址: https://segmentfault.com/a/1190000009002754
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞