（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/>'
})

来源：oschina

链接：https://my.oschina.net/u/1243457/blog/2248582

标签

vue-router

Vue.js