Vue路由

前言

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

简单路由基本使用

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

下载路由

<!-- 使用 router-link 组件来导航. -->
<router-link to="/foo">Go to Foo</router-link>

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

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

// 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: '<App/>',
  components: { App }
})

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

<template>
  <div id="app">
    <!--路由匹配到的组件将渲染在这里-->
    <router-view/>
  </div>
</template>

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

<template>
    <div>
        bar
    </div>
</template>

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

<template>
    <div>
        foo
    </div>
</template>

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

<template>
  <div>
    <router-link to='/foo'>foo</router-link>
    <router-link to='/bar'>bar</router-link>
    <div>
        <router-view/>  
    </div>
  </div>
</template>

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