vue路由配置

1、安装路由，因为路由是vue的一个插件。

npm (cnpm) install vue-router -D

2、在main.js中引入路由

import Vue form 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

3、在main.js中配置路由

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from './Home'
import Me from './Me'

// 路由配置
const router = new VueRouter({
  mode: 'history',  // 使用h5的history模式
  base: __dirname, // 指定根目录
  linkActiveClass: 'active',
  routes: [
    {
      path: '/home', component: Home
    },
    {
      path: '/me', component: Me
    },
    {
      path: '*', redirect: Home
    }
  ]
})
new Vue({
  el: '#app',
  router, // 引入路由
  render: h => h(App)
})

4、很明显main.js中要引入喝多第三方插件，这样在main.js中配置路由是不合理的，所以需要在src目录中创建，config目录，里面创建routes.js路由文件

router.js 代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from '../Home'
import Me from '../Me'

export default new VueRouter ({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/home', component: Home, name='home'
        },
        {
            path: '/me', component: Me, name='me'
            children: [ // 子路由
                { 
                    path: 'child-one',
                    component: ChildOne
                }
            ]
        },
        {
           path: '/books/:id', component: BookDetails, name='BookDetails'
        }
    ]
})

5、路由与导航
router-view：路由坐基
router-link

参数：
1、:to => :to="{name: 'home'}" 跳转的路由name
    :to="{name: 'BookDetails', params: {id: 1}}" 路由跳转参数
    获取：this.$route.params.id 就可以获取到参数
    export default {
        created() {
            const bookId = this.$route.params.id
        },
        watch: { // 参数路由组件的生命周期钩子函数不会再调用，created,mounted..., 所以如果要查看，需要监听
            '$route' (to, from) {
                对路由变化做出响应
            }
        }
    }
或者
to =>  to="/home" 跳转路由path

2、active-class="active" 路由激活样式，或者直接在路由定义的时候配置全局

new VueRouter({
    linkActiveClass: "active"
})

3、exact 精确匹配参数，这个很有用，在路由默认 "/"的时候，一般都加载到首页，也就是"/", "/home"其实加载的是同一个组件，但是问题来了，这样路由的激活样式就有问题了，不管跳转到哪个界面 "/"都是出于激活状态的，所以需要精确匹配，这样就解决了这个问题。
4、tag="div" 路由跳转时候生成html标签
5、history路由的控制，
    push() 默认 push到Url目录中 /a  => /b
    append() 追加到当前Url下    /a  => /a/b
    replace() 替换当前的url     /a  = /b
    
    <router-link :to="{name: 'Home'}" replace>替换</router-link>

6、路由懒加载

routes: [
        {
            path: '/home', component: Home, name: 'home'
        },
        {
            path: '/me', name: 'me',
            component:  resolve => require(['../Me.vue'], resolve) //懒加载
        }
    ]

7、app.vue

<template>
  <div id="app">
    <router-link to='home'>首页</router-link>
    <router-link to='me'>我</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import './assets/css/index.css' // 全局导入css文件
export default {
  name: "app",
  data() {
    return {
      msg: "hello world!"
    };
  }
};
</script>

// scoped 标识这个css样式只对这个组件有用
<style scoped> 
  /* 可以在里面写css 或者使用 @import 导入外部的css */
  @import './assets/css/index.css';
</style>

源码
github: https://github.com/zxc1989092...

案例：

路由代码，实现懒加载

import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'
import OrderList from '../components/OrderList'

Vue.use(Router)

export default new Router({
  base: __dirname,
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      redirect: '/home/order-list', // 重定向
      children: [
        {
          path: 'order-list',
          component: OrderList,
          name: 'order-list'
        },
        {
          path: 'user-list',
          component: resolve => require(['../components/UserList.vue'], resolve),
          name: 'user-list'
        },
        {
          path: 'engineer-list',
          component: resolve => require(['../components/EngineerList.vue'], resolve),
          name: 'engineer-list'
        }
      ]
    },
    {
      path: '/about',
      name: 'About',
      component: resolve => require(['../components/About.vue'], resolve)
    },
    {
      path: '/product',
      name: 'Product',
      component: resolve => require(['../components/Product.vue'], resolve)
    },
    {
      path: '/',
      redirect: 'home'
    }
  ]
})

目录结构