(4)添加vue-router
1 安装vue-router
cnpm install vue-router --save
2 页面准备
新建目录/src/views/common
,此目录下面建立4个组件404.vue
、home.vue
、login.vue
、theme.vue
。每个文件只有表示该文件的一个题目,如theme.vue
为:
<template>
<div>
<h1>theme</h1>
</div>
</template>
<script>
export default {
}
</script>
3 路由配置
新建文件/src/router/index.js
,内容如下:
/**
* 全站路由配置
*
* 建议:
* 1. 代码中路由统一使用name属性跳转(不使用path属性)
*/
import Vue from 'vue'
import Router from 'vue-router'
// 全局路由(无需嵌套上左右整体布局)
const globalRoutes=[
{
path:'/404',
component:require('@/views/common/404.vue').default,
name:'404',
meta:{title:'404未找到'}
},
{
path:'/login',
component:require('@/views/common/login.vue').default,
name:'login',
meta:{title:'登录'}
}
]
// 主入口路由(需嵌套上左右整体布局)
const mainRoutes={
path:'/',
component:require('@/views/main.vue').default,
name:'main',
redirect:{name:'home'},
meta:{title:'主入口整体布局'},
children:[
{
path:'/home',
component:require('@/views/common/home.vue').default,
name:'home',
meta:{title:'首页'}
},
{
path:'/theme',
component:require('@/views/common/theme.vue').default,
name:'theme',
meta:{title:'主题'}
}
]
}
Vue.use(Router)
const router = new Router({
mode:'hash',
routes:globalRoutes.concat(mainRoutes)
})
export default router
所涉及到的内容,在vue-router
的文档中都能查到。
4 界面修改
4.1 App.vue修改
整站就是一个路由,很魔性。
<template>
<transition name="fade">
<router-view></router-view>
</transition>
</template>
<script>
export default {
}
</script>
根据路由配置,这个App.vue组件,只显示三个界面,分别是/404
、/login
、/
。 其中/
这个路由下(显示的是main.vue
),还有子路由(所以main.vue
里面还有router-view
)。在正常登录后,显示的就是子路由的内容。
4.2 main.vue主界面
新建/src/views/main.vue
。 主要修改内容是,顶部为nav
标签,左侧是aside
标签,内容部分是main
标签,这些是html5
语义标签。
5 main.js修改
引入vue-router
:
import Vue from 'vue'
import App from './App'
//引入vue-router
import router from '@/router'
import '@/assets/scss/index.scss'
Vue.config.productionTip = false
// 使用router
Vue.use(router)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//配置router
components: { App },
template: '<App/>'
})