vue-router 的基本使用方式
2017-04-11 本文已影响47人
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
如有错误的地方欢迎指出。转载请注明出处！
