Vue2.0 系列教程:配置路由

6654 次阅读 zuley 发布于 2年前 (2016-11-18) 前端开发 0 评论

上一节教程中,我们在项目中导入了路由和路由配置文件,这一节详细解释一下并配置路由。

一、路由使用

// 导入路由组件
import VueRouter from 'vue-router'

// 导入路由配置文件
import routerConfig from './routerConfig.js'

// 注册路由
Vue.use(VueRouter)

// 创建路由
const router = new VueRouter({
  routes: routerConfig
})

// 实例化根组件,并绑定路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

提示:导入路由和导入其他的插件一样,导入都必须先用 Vue 注册,才能够使用。

二、路由配置

这里是返回一个路由配置数组,供路由使用。以下写法使用了路由的懒加载,只有当路由访问的时候才加载对应的组件,这样可以更高效,而不会打包出一个巨大的入口文件。其他详细的使用方式,请访问插件官网

export default [
  {
    path: '/',
    component: resolve => require(['./views/index.vue'], resolve)
  },
  {
    path: '/register',
    component: resolve => require(['./views/register.vue'], resolve)
  },
  {
    path: '/login',
    component: resolve => require(['./views/login.vue'], resolve)
  }
]

三、路由访问

现在可以直接访问 /login 等页面了,也可以在页面中点击跳转。这里有个跟1.0不同的是,链接使用 router-link 而不是 aa作为实体外链的时候用

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/register">注册</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>
</template>

第一讲:起步

  1. Vue2.0 系列教程:简介
  2. Vue2.0 系列教程:npm 常用命令
  3. Vue2.0 系列教程:npm package.json 配置文件语法
  4. Vue2.0 系列教程:Vue的安装和使用

第二讲: 构建环境和安装依赖

  1. Vue2.0 系列教程:初始化项目
  2. Vue2.0 系列教程:配置路由
  3. Vue2.0 系列教程:使用 leancloud 云服务

第三讲:开发页面

  1. Vue2.0 系列教程:注册页面
  2. Vue2.0 系列教程:登录页面
  3. Vue2.0 系列教程:首页 OR 退出登录
二维码
扫描此二维码去手机端访问

Vue2.0 系列教程:配置路由

文章评论

发表评论