vue编程-增加路由模块

1.将vue-router依赖加入到package.json

{
  "name": "practice_novel_site",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.15.0",
    "sass-loader": "^7.2.0",
    "node-sass": "^5.0.0",
    "vue-router": "^3.0.1",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "sass": "^1.22.10",
    "vue-template-compiler": "^2.6.10"
  }
}

2.新增router模块，index.js统一管理所有页面路由

import Vue from 'vue'
import Router from 'vue-router'
import homeView from '@/components/homeView'
import typeNovel from '@/components/typeNovelView.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/homeView',
      name: 'homeView',
      component: homeView
    },
    {
      path: '/typeNovelView',
      name: 'typeNovelView',
      component: typeNovel
    }
  ]
})

3.main.js统一导出vue对象的时候，将自定义路由配置进去

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4.主页增加路由跳转组件与路由界面

<template>
  <div class="homePage">
    <el-card shadow="hover" class="head">
      <el-container>
        <el-aside width="200px">
          <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
            <el-menu-item index="0">首页</el-menu-item>
            <el-menu-item index="1">小说分类查找</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-input placeholder="书名或者作者 请您少字也别输错字" v-model="searchParam" class="searchNovel">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-main>
      </el-container>
    </el-card>
    <div class="homeMainView">
      <router-view></router-view>
    </div>
  </div>
</template>

el-menu确定了主要跳转，主页统计推荐、小说分类查找、模糊搜索
router-view则是确定跳转页面的展示位置

5.逐一针对路由页面编写