Vue路由

前言

本文基于Vue2.0的简单路由的应用，更多路由详情请进入官网

简单路由基本使用

路由的简单方式官网中的栗子写的挺清楚，这里把官网中的重点提取过来吧！

下载路由

Go to Foo

// 1. 定义组件。
const Foo = { template: '
foo
' }
const Bar = { template: '
bar
' }

// 2. 定义路由
const routes = [
  { path: '*', redirect:'/foo' },//重定向
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
const app = new Vue({
  router
}).$mount('#app')

脚手架配合路由的应用

使用vue-cli新建项目，则默认已经安装了路由

项目目录

image.png

main.js
在此文件中可以看到路由已经挂载在Vue事例上了，无需修改

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//导入路由

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//挂载路由
  template: '',
  components: { App }
})

App.vue
入口文件，在此文件中默认将HelloWorld.vue显示，无需修改

Bar.vue
components文件夹中新建Bar.vue

Foo.vue
components文件夹中新建Foo.vue

HelloWorld.vue
components文件夹中的HelloWorld.vue修改

index.js
router文件夹中的index.js则为配置路由的文件
若为HelloWorld的同级路由，则在HelloWorld的同级目录下添加路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [{//子路由
          path: '/foo',
          component: resolve => require(['@/components/Foo'], resolve)
        },{
          path: '/bar',
          component: resolve => require(['@/components/Bar'], resolve)
      }]
    }
  ]
})

效果

image.png