项目目录结构
|-- src
|-- components
|-- index
|-- page
|-- index2
|-- router
|-- index.js
|-- App.vue
|-- main.js
1、App.vue
<template>
<-- HTML部分 -->
<div id="app">
<router-link to="/index">访问 2级 页面</router-link>
<-- 2级页面在此显示-->
<router-view></router-view>
</div>
</template>
2、main.js(文件位置:src/main.js)
import Vue from 'vue'
import App from './App' //一级页面模板
import router from './router' //引入router.js
import Vuex from 'vuex'
import Router from 'vue-router' //路由组件已安装,声明路由
import VueResource from 'vue-resource'
import './css/page.css'
Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(Router) //使用路由
Vue.use(VueResource)
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //路由实例化
components: { App },
template: '<App/>'
})
3、index.js(文件位置:src/router/index.js)
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import Index from '@/components/index' //注册的路由
export default new Router({
mode: 'history', //去除地址栏中的 #
routes: [{
path: '/',
name: 'home',
component: home
},
{
path: '/index', //path: 地址栏中显示; 同时对应router-link 属性 to="/index"
name: 'index', //
component: Index //组件名称
}
]
})
4、嵌套路由--页面
<template>
<-- 2级页面所在 -->
<div id="index">
<router-link to="/index/index2">访问 3级 页面</router-link>
<-- 3级页面在此显示-->
<router-view></router-view>
</div>
</template>
5、嵌套路由--index.js设置
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import Index from '@/components/index' //注册的路由
import Index2 from '@/components/page/index2' //注册的路由
export default new Router({
mode: 'history', //去除地址栏中的 #
routes: [{
path: '/',
name: 'home',
component: home
},
{
path: '/index', //path: 地址栏中显示; 同时对应router-link 属性 to="/index"
name: 'index', //
component: Index, //组件名称
children: [{ //使用children,children里即为子路由
path: '/index/index2', //为方便理解,设置为父/子形式
name: 'index2',
component: Index2 //组件名称
}
]
}
]
})