vue 路由守卫

 

App.vue

<template>
  <div id="nav">
    <!-- 导航 -->
    <router-link to="/" active-class="current" replace>Home</router-link> |
    <router-link to="/about" active-class="current" replace>About</router-link> |
    <router-link to="/test1_bak">Test1_bak</router-link> |
    <router-link to="/test1">Test1</router-link> |
    <router-link to="/test2">Test2</router-link> |
    <router-link :to="'/test3/'+test3_id">Test3</router-link> |
    <router-link to="/test4">Test4</router-link> |
    <router-link :to="{path:'/test5',query:{name:'test5_name',site:'test5_site'}}">Test5</router-link> |
    <router-link to="/test6">Test6</router-link> |
  </div>
  <!-- 路由出口 -->
  <router-view/>
</template>
<script>
import {ref} from "vue";

export default {
  setup(){
    const test3_id = ref('001')

    return{
      test3_id
    }
  }

}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 10px;
  background-color: lightskyblue;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

/* 默认选中样式类 */
#nav a.router-link-exact-active {
  color:orangered;
}

.current{
  font-size: 24px;
  font-weight: bolder;
}


</style>

 

index.js

//引入
import { createRouter, createWebHashHistory } from 'vue-router';
// import Home from '../views/Home.vue'
// import Test3 from '../views/Test3.vue'

//路由懒加载
const Home = () => import('../views/Home.vue');
const Test3 = () => import('../views/Test3.vue');
const Test4 = () => import('../views/Test4.vue');
const Test4_1 = () =>  import("../components/Test4-1");
const Test4_2 = () =>  import("../components/Test4-2");

const Test5 = () => import('../views/Test5.vue');
const Test6 = () => import('../views/Test6.vue');

//创建路由对象
const routes = [
  {
    path: '/',
    meta:{title:'home'},
    name: 'Home',
    component: Home
  },
    //路由重定向
  {
    path: '/home',
    meta:{title:'home'},
    redirect:'/'
  },
  {
    path: '/about',
    meta:{title:'about'},
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test1_bak',
    meta:{title:'Vue2示例'},
    name: 'Test1_bak',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test1_bak.vue')
  },
  {
    path: '/test1',
    meta:{title:'Vue3工程示例'},
    name: 'Test1',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test1.vue')
  },
  {
    path: '/test2',
    meta:{title:'js实现路由跳转'},
    name: 'Test2',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test2.vue')
  },
  {
    path: '/test3/:id',
    meta:{title:'动态路由'},
    name: 'Test3',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test3
  },
  {
    path: '/test4',
    redirect: '/test4/test4-1',
    meta:{title:'路由嵌套'},
    name: 'Test4',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test4,
    children:[
      {path:'test4-1',component:Test4_1},
      {path:'test4-2',component:Test4_2}
    ]
  },
  {
    path: '/test5',
    meta:{title:'参数传递'},
    name: 'Test5',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test5
  },
  {
    path: '/test6',
    meta:{title:'前置守卫'},
    name: 'Test6',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test6,
    //独享守卫
    beforeEach:(to,from,next)=>{
      // console.log("from:"+from);
      // console.log("to:"+to);
      // document.title = to.meta.title;
      //放行
      next();
    }
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  linkActiveClass:'current',
  routes
})

//全局路由的前置守卫
router.beforeEach(
    (
      to,
      from,
      next
    ) => {
      // console.log("from:"+from);
      // console.log("to:"+to);
      // document.title = to.meta.title;
      //放行
      next();
    }
)

//全局路由的后置守卫
router.afterEach(
    (
      to//,
      // from
    ) => {
      // console.log("from:"+from);
      // console.log("to:"+to);
      document.title = to.meta.title;
})

//导出路由对象
export default router

 

Test6.vue

<template>
  <div id="test4_body">
    <div id="header"><h1>上标题</h1></div>
    <div id="body">
      <div id="navl">
        左导航
        <div>
          Test6
          <div>

          </div>
        </div>
      </div>
      <div id="main">
        中内容
        <router-view></router-view>
      </div>
      <div id="navr">右导航</div>
    </div>
    <div id="footer"><p>下版权</p></div>
  </div>
</template>
<script>
// import {onBeforeRouteLeave,onBeforeRouteUpdate} from 'vue-router';
export default {
  name: 'Test4',
  setup(){
    // onBeforeRouteLeave((to,form,next)=>{
    //
    // })
    // onBeforeRouteUpdate((to,form,next)=>{
    //
    // })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* CSS Document */
/**{*/
/*  margin:0;*/
/*  padding:0;*/
/*}*/
/*body{*/
/*  margin:10px;*/
/*}*/
#test4_body{
  margin:0;
  padding:0;
  /*margin:10px;*/
  /*width:600px;*/
  /*height: 100%;*/
  /*margin:0 auto;*/
  /*height:400px;*/
  height:auto;
  min-height:500px;
  /*width:800px;*/
  background:#bbeeeb;
  margin:0 auto;
}

#header{
  border:1px solid black;
  /*width:600px;*/
  height:60px;
  margin:0 auto;
  margin-bottom:10px;
}
#header h1{
  height:60px;
  line-height:60px;
  font-size:16px;
  text-align:center;
}
#body{
  /*width:600px;*/
  margin:0 auto;
}
#navl{
  border:1px solid black;
  width:150px;
  height:auto;
  float:left;
  margin-bottom:10px;
  background:lightcyan;
  overflow: auto;
}
#main{
  border:1px solid black;
  /*width:294px;!*边框也算一个像素*!*/
  width: auto;
  min-width: 300px;
  height:auto;
  float:left;
  margin-bottom:10px;
  background:lightblue;
}
#navr{
  border:1px solid black;
  /*width:150px;*/
  /*height:500px;*/
  float:right;
  margin-bottom:10px;
  background:lightyellow;
}
#footer{
  border:1px solid black;
  /*width:600px;*/
  height:60px;
  line-height:60px;
  margin:0 auto;
  text-align:center;
  clear:both;
}
</style>