前言
本文基于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
