vue-router

路由的使用

index.js

//配置路由相关信息
import Vue from 'vue';
import Router from 'vue-router';
import Home from './ Home';
//1. 通过Vue.use(插件),安装插件
Vue.use(Router);   //该指令会默认执行 VueRouter.install下载路由插件

//2. 创建路由对象
const router = new Router({
  mode: 'history',  //**默认为hash模式，这里设置为history模式**
  linkActiveClass: 'active', //**给活跃路径添加样式**
  //  配置路由和组件之间的应用关系
  routes: [
   {
      path: '/', //**配置页面默认路径**
      name: 'dashboard',
      redirect: '/main'
    }, {
      path: '/home',
      component: Home
    }, {
      path: '/main',
      name: 'main',
      redirect: '/main/bomquery',
      component: main,
      children: [
         {
          path: 'bomquery',
          name: 'main.bomquery',
          component: () => import (
          '../views/components/bomQuery/bomQuery.vue'),  //**路由懒加载**
          meta: { //元数据
            keepAlive: true, // 需要被缓存
          }
        }, 
        {
          path: 'bomquery/bominfo/:id', //**动态路由**
          name: 'main.bomquery.bominfo',
          component: () => import (/* webpackChunkName: 'main' */
          '../views/components/bomQuery/bomInfoDetail.vue'),
          children: [ //**路由嵌套**
	        {
	          path: 'firm',
	          name: 'register.firm',
	          component: () =>
	            import(/* webpackChunkName: 'main' */
	            '../views/pages/login/register/firm/register.vue')
	        },
	        beforeEnter:(to, from, next) => { //组件内部独享守卫示例
			console.log(to,'000');
			next(); 
			}
	      ]
        },       
  ]
});
//

## **导航守卫**
//前置钩子（hook）
router.beforeEach((to, from, next) => {
//从from到to
console.log(to.meta.keepAlive);
next(); //必须执行，否则路由跳转失效
});
//后置钩子 ，全局守卫不需要主动调用next（）函数
router.afterEach(() => {
  // 回到顶部
  window.scrollTo(0, 0);
});


//3. 将路由对象传入vue实例
export default router;

main.js使用路由

import Vue from 'vue';
import App from './App';
import router from './router';

export default new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

App.Vue

<template>
  <div id="app">
  <router-link  to="/main' tag ="button" relplace active-class="active"></router-lin> //配置导航栏路由地址
   <router-view></router-view> //**渲染对应的组件内容**
 //  <keep-alive>   //<keep-alive>使组件处于活跃状态 路由跳转时不会被销毁
//      <router-view v-if="$route.meta.keepAlive">
         <!-- 这里是会被缓存的视图组件，比如 Home！ -->
//      </router-view>
 //   </keep-alive>
//    <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
//    </router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  }
</script>
.active{
  color:red
}
</script>

补充：

this.$router\ast \ast ：每个Vue组件都有一个对应的router对象\ast \ast this.$route ：当前活跃的路由

router-link和router-view都是由Vue.component创建的全局组件。
actived（活跃时被调用）和deactived方法只有组件被keep-alive包裹时才会生效

//注意，不能随便加空格

include：字符串或正则表达式，匹配上的组件才能被缓存，匹配组件的name
exclude：排除在外字符串或正则表达式，匹配上的组件都不会被缓存，匹配组件的name