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。