第4章 vue全家桶（vue-router+vuex）- 4.13 组件内部的守卫应用4步骤：

本文详细介绍了Vue.js组件内部守卫的使用，包括在Eaditor.vue组件中创建、挂载以及设置守卫方法的过程。通过Eaditor.vue的beforeRouteLeave守卫，确保用户在离开编辑页面前保存信息，提供了良好的用户体验。同时，文章也涵盖了Vue Router的配置，如路由重定向、嵌套路由、命名视图和全局守卫的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.13 组件内部的守卫应用4步骤：

//组件内部的守卫应用步骤1：在views文件夹下面新建文件Eaditor.vue。
//组件内部的守卫应用步骤3：在index.js里面挂载Eaditor.vue。
//组件内部的守卫应用步骤3：在App.vue里面定制链接
//组件内部的守卫应用步骤4：在Eaditor.vue里面设置守卫方法。

首先看下项目目录：

下面介绍本文的内容：

//组件内部的守卫应用步骤1：在views文件夹下面新建文件Eaditor.vue。

Eaditor.vue代码：

<template>
    <div>
        <h2>用户的编辑页面</h2>
        <textarea v-model="content" cols="30" rows="10"></textarea> <!--创建输入框  -->
        <button @click="saveContent">保存</button>  <!-- 创建保存按钮 -->
        <ul>
            <li v-for="(item,index) in list" :key="index">  <!-- 列表为了保存数据 -->
                <h3>{{item.title}}</h3>
            </li>
        </ul>
    </div>
    <!--  -->
</template>

<script>
    export default {
        data() {
            return {
                content: '',   //创建空输入框
                list:[]     //创建空列表
            };
        },
        methods:{   //创建方法，把输入框的内容保存到列表
            saveContent(){
                this.list.push({
                    title:this.content
                })
                //清空文本输入框
                this.content = '';
            }
        },
        // beforeRouteEnter(to,from,next){ //很少使用

        //     next(vm=>{
        //         // console.log(vm.content);
        //     });
        // },
        // watch:{
        //     '$route':()=>{

        //     }
        // },
        // beforeRouteUpdate(to,from,next){    //监听函数，用的不是很多，多数用watch监听。
        //     //组件重用时，这个方法才起作用
        //     next();
        // },
        beforeRouteLeave(to,from,next){     //设置路由离开的方法
            if(this.content){
                //给用户提示，保证用户体验
                alert('请确保保存信息之后，再离开');
                next(false);    //默认失败，还保持在这个页面
            }else{
                next();
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

//组件内部的守卫应用步骤3：在index.js里面挂载Eaditor.vue。

index.js代码：

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import Home from '../views/Home.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',  //history模式，是干净的路由地址，即在地址栏里面没有#
  base: process.env.BASE_URL,
  // routes
  routes:[
    {
      path:'/',
      // redirect:'/home'
      redirect:{name:'home'} //路由重定向，即：http://localhost:8083回车跳转到http://localhost:8083/home，显示页面还是同一个页面。
    },
    {
      path: '/home',
      name: 'home',
      // component: HomeView
      components:{  //命名视图步骤2：挂载侧边栏。
        default:Home, //默认的名字
        main:()=>import('@/views/Main'),
        sideBar:()=>import('@//views/SideBar')
      }
    },
    //同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
    {
      path: '/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:'/about',
    //   name:'about',
    //   component:HomeView
    // },
    {
      path:'/user/:id',  //:id就是动态路由匹配
      name:'user',
      component:User,
      // props:true  //传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。
      
      //下面是通过props传id和title。
      props:(route)=>({
        id:route.params.id,
        title:route.query.title
      }),
      children:[  //嵌套路由的使用步骤2：创建子组件children
        {
          path:'profile', //这里一定不能加/，因为/在路由中已经存在了。
          component:()=>import('@/views/Profile')
        },
        {
          path:'posts',
          component:()=>import('@/views/Posts')
        },
      ]
    },
    { //如何使用全局守卫做登录操作步骤2：
      path:'/notes',
      name:'notes',
      component:()=>import('@/views/Notes')
    },
    {
      path:'/login',
      name:'login',
      component:()=>import('@/views/Login')
    },
    {   //组件内部的守卫应用步骤3：在index.js里面挂载Eaditor.vue。
      path:'/eaditor',
      name:'eaditor',
      component:()=>import('@/views/Eaditor')
    },  
    //http://localhost:8083/page?id=1&title=foo   query
    {
      path:'/page',
      name:'page',
      component:()=>import('@/views/Page'),  //这里的方法等同于import page from '../views/Page.vue'
      alias:'/aaa'  //给路由起别名
      //给路由起别名(用的很少)http://localhost:8083/user/page?id=1&title=foo和http://localhost:8083/aaa都可以访问Page页面
    },
    {
      path:'/user-*',  //*是通配符
      component:()=>('@/views/User-admin')
    }, 
    {
      path:'*',
      component:()=>import('@/views/404')  //路由的执行顺序是从上到下，所以404永远要放在最后面。
    }
  
  ]
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面



//路由跳转：前端和后端结构不一样，就需要使用嵌套路由了。
//总共分四步搭建嵌套路由。
//嵌套路由的使用步骤1：在views文件夹下面新建两个组件Posts.vue和Profile.vue


//命名视图总共分为3步骤：
//命名视图步骤1：首先在views文件夹下面新建两个组件Main.vue和SideBar.vue
//命名视图步骤2：在index.js里面挂载侧边栏。
//命名视图步骤3：在App.vue添加渲染


//组件内部的守卫应用4步骤：
//组件内部的守卫应用步骤1：在views文件夹下面新建文件Eaditor.vue。
//组件内部的守卫应用步骤3：在index.js里面挂载Eaditor.vue。
//组件内部的守卫应用步骤3：在App.vue里面定制链接
//组件内部的守卫应用步骤4：在Eaditor.vue里面设置守卫方法。

//组件内部的守卫应用步骤3：在App.vue里面定制链接

App.vue代码：

// App.vue里面的内容

<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- //router_link相当于a标签，to属性相当于a标签的href -->

      <!-- //<router-link to="/">Home</router-link> | 这是静态路由
      <//router-link to="/about">About</> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 加：，这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link> |
      <!-- 声名式导航 -->
      <router-link :to="{name:'user',params:{id:1}}">User1</router-link>  |  <!-- //params是参数的意思。 -->
      <router-link :to="{name:'user',params:{id:2}}">User2</router-link>  |
      <router-link :to="{name:'page',query:{id:1,title:'foo'}}">Page</router-link>  |
      <!-- 路由嵌套 -->
      <router-link to='user/1/profile'>user/1/profile</router-link>  |   <!-- //嵌套路由的使用步骤3：定制路由跳转-->
      <router-link to='user/1/posts'>user/1/posts</router-link> |
      <router-link :to="{name:'notes'}">我的笔记</router-link>  |<!--//如何使用全局守卫做登录操作步骤3：-->
      <router-link :to="{name:'eaditor'}">编辑</router-link>  <!--//组件内部的守卫应用步骤3：在App.vue里面定制链接-->
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>  <!-- router-view是路由出口，在这里渲染Home -->      
    <router-view name="main" class="main"></router-view>  <!--//命名视图步骤3：添加渲染-->
    <router-view name="sideBar" class="sideBar"></router-view>
  </div>
</template>

<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: 30px;
}

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

nav a.router-link-exact-active {
  color: #42b983;
}
</style>