2023/1/10 Vue学习笔记6 - 路由基本使用

news2024/11/26 19:32:14

1 路由的简介-router

1、路由就是一组key-value的对应关系。
2、多个路由，需要经过路由器的管理。

SPA (single page web application）应用 - 单页面web应用

在这里插入图片描述
在这里插入图片描述

{
    "key":"/class",
    "value":"班级组件"
}

1.vue-router的理解：

vue的一个插件库，专门用来实现SPA应用。

2.对SPA应用的理解：

1）单页Web应用（single page web application, SPA）。
2）整个应用只有一个完整的页面。
3）点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4）数据需要通过 ajax 请求获取。

3.路由的理解：
1）什么是路由？

一个路由就是一组映射关系（key - value）
 key 为路径, value 可能是 function 或 component

2）路由分类
后端路由：

1）理解：value 是 function, 用于处理客户端提交的请求。
2）工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

前端路由：

1）理解：value 是 component，用于展示页面内容。
2）工作过程：当浏览器的路径改变时, 对应的组件就会显示。

2 路由基本使用

路由 理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。
1.基本使用：
1）安装vue-router，命令：npm i vue-router
2）应用插件：Vue.use(VueRouter)
3）编写router配置项：
index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/components/About";
import Home from "@/components/Home";

// 创建一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
    ]
})

4）实现切换
App.vue

<template>
  <div>
    <div>
      <h2>Vue Router Demo</h2>
    </div>
    <div>
      <!--          原始html中我们使用a标公实现页面的跳转-->
      <!--          <a class="list-group-item active" href="./about.html">About</a>-->
      <!--          <a class="list-group-item" href="./home.html">Home</a>-->

      <!--          通过路由的方式-->
      <router-link active-class="active" to="/Home"> Home</router-link>
      <router-link active-class="active" to="/About"> About</router-link>
    </div>
    <div>
      <!--      router-view - 指定组件的呈现位置-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {}
}
</script>

5）指定展示位置

    <div>
      <!--      router-view - 指定组件的呈现位置-->
      <router-view></router-view>
    </div>

代码：
在这里插入图片描述
还有两个组件：
About.vue

<template>
  <h2>i am about</h2>
</template>

<script>
export default {
  name: `About`
}
</script>

<style>
</style>

Home.vue

<template>
  <h2>i am home</h2>
</template>

<script>
export default {
  name: `Home`
}
</script>

<style>
</style>

main.js

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

// 引入vue-router
import VueRouter from 'vue-router'

// 引入路由器
import router from "@/router";

//应用插件
Vue.use(VueRouter)

Vue.config.productionTip = false

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

在这里插入图片描述
在这里插入图片描述

3 几个注意点

（1）路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

在这里插入图片描述

（2）通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
（3）每个组件都有自己的$route属性，里面存储着自己的路由信息。
（4）整个应用中只有一个router，可以通过组件的$router属性获取到。

4 嵌套路由

1）配置路由规则，使用children配置项

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";

// 创建一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About,
        },
        {
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                },
            ]
        },
    ]
})

2）跳转（要写完整路径）

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul>
        <li>
          <router-link to="/home/news">News</router-link>
        </li>
        <li>
          <router-link to="/home/message">Message</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>

</template>

<script>
export default {
  name: `Home`
}
</script>

<style>
</style>

其他文件：
Message.vue

<template>
  <div>
    <ul>
      <li>
        <a href="/message1">message001</a>&nbsp;&nbsp;
      </li>
      <li>
        <a href="/message2">message002</a>&nbsp;&nbsp;
      </li>
      <li>
        <a href="/message3">message003</a>&nbsp;&nbsp;
      </li>
    </ul>
  </div>

</template>

<script>
export default {
  name: `Message`
}
</script>

<style>
</style>

News.vue

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
export default {
  name: `News`
}
</script>

<style>
</style>

在这里插入图片描述

5 路由的query参数

路由的query参数
1）作用：跳转的时候传递参数
2）如何使用：
跳转路由并携带query参数，有两种写法：
Message.vue

<template>
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!--        <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>&nbsp;&nbsp;-->
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
          path: '/home/message/detail',
          query: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}
        </router-link>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: `Message`,
  data() {
    return {
      messageList: [
        {id: '001', title: '消息001'},
        {id: '002', title: '消息002'},
        {id: '003', title: '消息003'},
      ]
    }
  }
}
</script>

<style>
</style>

用$route.query接收参数：

<li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li>

在这里插入图片描述
其他文件：
index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About,
        },
        {
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            path: 'detail',
                            component: Detail
                        }
                    ]
                },
            ]
        },
    ]
})

Detail.vue

<template>
  <ul>
    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息标题：{{ $route.query.title }}</li>
  </ul>
</template>

<script>
export default {
  name: `Detail`,
  mounted() {
  }
}
</script>

<style>
</style>

6 命名路由

1）作用：可以简化路由的跳转。
2）如何使用：
给路由命名：

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
export default new VueRouter({
    routes: [
        {   name: 'guanyu',
            path: '/about',
            component: About,
        },
        {
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {   name: 'xiangqing',
                            path: 'detail',
                            component: Detail
                        }
                    ]
                },
            ]
        },
    ]
})

简化跳转：

<template>
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!--        <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>&nbsp;&nbsp;-->
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
          // path: '/home/message/detail',
          name: 'xiangqing',
          query: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}
        </router-link>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: `Message`,
  data() {
    return {
      messageList: [
        {id: '001', title: '消息001'},
        {id: '002', title: '消息002'},
        {id: '003', title: '消息003'},
      ]
    }
  }
}
</script>

<style>
</style>

7 路由的params参数

1）配置路由，声明接收params参数

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
export default new VueRouter({
    routes: [
        {   name: 'guanyu',
            path: '/about',
            component: About,
        },
        {
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {   name: 'xiangqing',
                            path: 'detail/:id/:title',
                            component: Detail
                        }
                    ]
                },
            ]
        },
    ]
})

2）传递参数

<template>
  <ul>
    <!--    <li>消息编号：{{ $route.query.id }}</li>
        <li>消息标题：{{ $route.query.title }}</li>-->

    <li>消息编号：{{ $route.params.id }}</li>
    <li>消息标题：{{ $route.params.title }}</li>
  </ul>
</template>

<script>
export default {
  name: `Detail`,
  mounted() {
  }
}
</script>

<style>
</style>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3）接收参数

<template>
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!--        <router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>&nbsp;&nbsp;-->
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <!--        <router-link :to="{
                  // path: '/home/message/detail',
                  name: 'xiangqing',
                  query: {
                    id: item.id,
                    title: item.title
                  }
                }">{{ item.title }}
                </router-link>-->

        <router-link :to="{
          // params 传值 只能是 name
          name: 'xiangqing',
          params: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}
        </router-link>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: `Message`,
  data() {
    return {
      messageList: [
        {id: '001', title: '消息001'},
        {id: '002', title: '消息002'},
        {id: '003', title: '消息003'},
      ]
    }
  }
}
</script>

<style>
</style>

8 路由的props配置

让路由组件更方便的收到参数
index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
export default new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
        },
        {
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            // path: 'detail/:id/:title',
                            path: 'detail',
                            component: Detail,
                            // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件 - 死的数据
                            // props: {
                            //     a: 1,
                            //     b: 'hello'
                            // }

                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props: true

                            // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})

Detail.vue

<template>
  <ul>
    <!--    <li>消息编号：{{ $route.query.id }}</li>
        <li>消息标题：{{ $route.query.title }}</li>-->

    <!--    <li>消息编号：{{ $route.params.id }}</li>
        <li>消息标题：{{ $route.params.title }}</li>-->

    <!--    <li>消息编号：{{ a }}</li>-->
    <!--    <li>消息标题：{{ b }}</li>-->

    <!--    <li>消息编号：{{ id }}</li>-->
    <!--    <li>消息标题：{{ title }}</li>-->

    <li>消息编号：{{ id }}</li>
    <li>消息标题：{{ title }}</li>
  </ul>
</template>

<script>
export default {
  name: `Detail`,
  // props: ['a', 'b'],
  props: ['id', 'title'],
  mounted() {
  }
}
</script>

<style>
</style>

Message.vue

<template>
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!--        <router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>&nbsp;&nbsp;-->
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <!--        <router-link :to="{
                  // path: '/home/message/detail',
                  name: 'xiangqing',
                  query: {
                    id: item.id,
                    title: item.title
                  }
                }">{{ item.title }}
                </router-link>-->

        <router-link :to="{
          // params 传值 只能是 name
          name: 'xiangqing',
          query: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}
        </router-link>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: `Message`,
  data() {
    return {
      messageList: [
        {id: '001', title: '消息001'},
        {id: '002', title: '消息002'},
        {id: '003', title: '消息003'},
      ]
    }
  }
}
</script>

<style>
</style>

9 router-link的replace属性

点击页面所经过的url都会保存到栈中 （push模式）

...
...
4 http://localhost:8080/#/home/message/detail?id=001&title=%E6%B6%88%E6%81%AF001
3 http://localhost:8080/#/home/message
2 http://localhost:8080/#/Home
1 http://localhost:8080/#/

1）作用：控制路由跳转时操作浏览器历史记录的模式。
2）浏览器的历史记录有两种写入方式，分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。
3）如何开启replace模式：

      <router-link replace active-class="active" :to="{
        name: 'guanyu'
      }"> About</router-link>

在这里插入图片描述

10 编程式路由导航

编程式路由导航
作用：不借助router-link实现路由跳转，让路由跳转更加灵活

<template>
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <router-link :to="{
          name: 'xiangqing',
          query: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}
        </router-link>
        <button @click="pushShow(item)">push查看</button>
        <button>replace查看</button>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: `Message`,
  data() {
    return {
      messageList: [
        {id: '001', title: '消息001'},
        {id: '002', title: '消息002'},
        {id: '003', title: '消息003'},
      ]
    }
  },
  methods: {
    pushShow(item) {
      this.$router.push({
        name: 'xiangqing',
        query: {
          id: item.id,
          title: item.title
        }
      })
    }
  }
}
</script>

<style>
</style>

在这里插入图片描述

<template>
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <router-link :to="{
          name: 'xiangqing',
          query: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}
        </router-link>
        <button @click="pushShow(item)">push查看</button>
        <button @click="replaceShow(item)">replace查看</button>

      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: `Message`,
  data() {
    return {
      messageList: [
        {id: '001', title: '消息001'},
        {id: '002', title: '消息002'},
        {id: '003', title: '消息003'},
      ]
    }
  },
  methods: {
    pushShow(item) {
      this.$router.push({
        name: 'xiangqing',
        query: {
          id: item.id,
          title: item.title
        }
      })
    },
    replaceShow(item) {
      this.$router.replace({
        name: 'xiangqing',
        query: {
          id: item.id,
          title: item.title
        }
      })
    }
  }
}
</script>

<style>
</style>

在这里插入图片描述

<template>
  <div>
    <h2>Vue Router Demo</h2>
    <button @click="back">后退</button>
    <button @click="forward">前进</button>
  </div>
</template>

<script>
export default {
  name: `Banner`,
  methods: {
    back() {
      this.$router.back()
    },
    forward() {
      this.$router.forward()
    },
  }
}
</script>

<style>
</style>

在这里插入图片描述

      // 前进三步
      this.$router.go(3)
      // 后退三步
      this.$router.go(-3)

11 缓存路由组件

缓存路由组件作用：让不展示的路由组件保持挂载，不被销毁。
在这里插入图片描述
切走之后，被销魂了！！！
在这里插入图片描述

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul>
        <li>
          <router-link to="/home/news">News</router-link>
        </li>
        <li>
          <router-link to="/home/message">Message</router-link>
        </li>
      </ul>
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>

</template>

<script>
export default {
  name: `Home`
}
</script>

<style>
</style>


<!-- 缓存多个路由组件 -->
<keep-alive :include="['News','Message']">
    <router-view></router-view>
</keep-alive>
 
<!-- 缓存一个路由组件 -->
<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

12 两个新的生命周期钩子

<template>
  <ul>
    <li :style="{opacity}">欢迎学习</li>
    <li>news001 <input type="text"/></li>
    <li>news002 <input type="text"/></li>
    <li>news003 <input type="text"/></li>
  </ul>
</template>

<script>
export default {
  name: `News`,
  data() {
    return {
      opacity: 1
    }
  },
  mounted() {
    setInterval(() => {
      console.log('@')
      this.opacity -= 0.01
      if (this.opacity <= 0) {
        this.opacity = 1
      }
    }, 16)
  }
}
</script>

<style>
</style>

在这里插入图片描述
解决方案：

<template>
  <ul>
    <li :style="{opacity}">欢迎学习</li>
    <li>news001 <input type="text"/></li>
    <li>news002 <input type="text"/></li>
    <li>news003 <input type="text"/></li>
  </ul>
</template>

<script>
export default {
  name: `News`,
  data() {
    return {
      opacity: 1
    }
  },
  activated() {
    this.timer = setInterval(() => {
      console.log('@')
      this.opacity -= 0.01
      if (this.opacity <= 0) {
        this.opacity = 1
      }
    }, 16)
  },
  deactivated() {
    clearInterval(this.timer)
  }
}
</script>

<style>
</style>

两个新的生命周期钩子
1）作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2）具体名字：
activated 路由组件被激活时触发。
deactivated 路由组件失活时触发。

$nextTick 真实DOM出来之后再回调

13 全局前置_路由守卫

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})
// 全局前置路由守卫 - 初始化时执行、每次路由切换前被调用
router.beforeEach((to, from, next) => {
    console.log(to, from, next)
    if (to.path === '/home' || to.path === '/about') {
        if (localStorage.getItem("school") === 'PekingUniversity1') {
            next()
        }
    }
})

export default router

14 全局后置_路由守卫

$route中的meta：路由元信息

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,

        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: {isNext: true}
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {isNext: true},
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})
// 全局前置路由守卫 - 初始化时执行、每次路由切换前被调用
// router.beforeEach((to, from, next) => {
//     console.log(to, from, next)
//     if (to.path === '/home' || to.path === '/about') {
//         if (localStorage.getItem("school") === 'PekingUniversity1') {
//             next()
//         }
//     }
// })

router.beforeEach((to, from, next) => {
    if (!to.meta.isNext) {
        next()
    }
})
export default router

title的展示：

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
            meta: {title: '关于'}

        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: {title: '主页'},
            // 二级路由
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: {isNext: true, title: '新闻'}
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {isNext: true, title: '消息'},
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            meta: {title: '详情'},
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})
// 全局前置路由守卫 - 初始化时执行、每次路由切换前被调用
// router.beforeEach((to, from, next) => {
//     console.log(to, from, next)
//     if (to.path === '/home' || to.path === '/about') {
//         if (localStorage.getItem("school") === 'PekingUniversity1') {
//             next()
//         }
//     }
// })

router.beforeEach((to, from, next) => {
    if (!to.meta.isNext) {
        next()
    }
})

// 全局后置路由守卫 - 初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    document.title = to.meta.title || '首页'
})

export default router

在这里插入图片描述

15 独享路由守卫

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
            meta: {title: '关于'}

        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: {title: '主页'},
            // 二级路由
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: {isNext: true, title: '新闻'},
                    beforeEnter: (to, from, next) => {
                        if (to.meta.isNext) { //判断当前路由是否需要进行权限控制
                            if (localStorage.getItem('school') === 'PekingUniversity') {
                                next()
                            } else {
                                alert('学校名不对，没有查看权限！')
                            }
                        } else {
                            next()
                        }
                    }
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {isNext: true, title: '消息'},
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            meta: {title: '详情'},
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})

export default router

16 组件内路由守卫

<template>
  <div>
    <h2>i am about</h2>
  </div>
</template>

<script>
export default {
  name: `About`,
  // 进入守卫：通过路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next) {

  },
  // 离开守卫：通过路由规则，离开该组件时被调用
  beforeRouteLeave(to, from, next) {

  }
}
</script>

<style>
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/153734.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

kali中wpscan工具使用

kali中wpscan工具使用

一.wpscan工具简介 wpscan是一款专门针对wordpress的扫描工具&#xff0c;采用ruby语言编写&#xff0c;能够扫描worpress网站中包括主题漏洞、插件漏洞以及wordpress网站本身存在的漏洞。wpscan还可以扫描wordpress网站启用的插件和其他功能。 在Kali Linux系统中&#xff0…
阅读更多...
关于distinct——去除重复记录

关于distinct——去除重复记录

distinct译为&#xff1a;不同的&#xff0c;有区别的&#xff1b;在SQL语句中表示去除重复记录的意思 举例&#xff1a;在员工表emp中查询所有的工作岗位。 分析&#xff1a;在员工表中的工作岗位字段下有重复的工作岗位&#xff0c;我们在查询的时候就希望将重复的工作岗位显…
阅读更多...
数据库取证——MySQL基础知识

数据库取证——MySQL基础知识

目录 一、数据库基础知识 &#xff08;一&#xff09;数据库&#xff08;DB&#xff09; &#xff08;二&#xff09;数据库管理系统&#xff08;DBMS&#xff09; &#xff08;三&#xff09;数据库系统&#xff08;DBS&#xff09; &#xff08;四&#xff09; 数据库的…
阅读更多...
【Unity云消散】简单理论基础：实现边缘光

【Unity云消散】简单理论基础：实现边缘光

写在前面 既然想要实现云的消散效果&#xff0c;那么边缘光如何计算也是一个重点。 在Unity Shader入门精要的14章&#xff0c;介绍轮廓线渲染就介绍了——轮廓边检测&#xff0c;而边缘光也是需要先检测出轮廓边再进行的。 Unity3D Shader系列之边缘光RimLight 这篇博客给…
阅读更多...
Go专家编程读书小记

Go专家编程读书小记

文章目录协程进程和线程进程&#xff1a;进程间通信&#xff1a;线程&#xff1a;区别&#xff1a;协程GMP模型调度策略内存管理内存分配span&#xff1a;cache&#xff1a;central&#xff1a;heap&#xff1a;垃圾回收常见的垃圾回收算法&#xff1a;三色标记&#xff1a;垃圾…
阅读更多...
【NI Multisim 14.0原理图设计基础——查找元器件】

【NI Multisim 14.0原理图设计基础——查找元器件】

目录 序言 一、查找元器件 &#x1f34d;1.浏览元器件 &#x1f34d;2.搜索元器件 &#x1f34d; 3.显示找到的元器件及其所属元器件库 &#x1f34d; 4.加载找到元器件的所属元器件库 序言 NI Multisim最突出的特点之一就是用户界面友好。它可以使电路设计者方便、快捷地…
阅读更多...
大资金现金管理的利器：稳定币网格做市策略

大资金现金管理的利器：稳定币网格做市策略

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…
阅读更多...
从一条记录说起—— InnoDB 记录结构

从一条记录说起—— InnoDB 记录结构

准备工作 到现在为止&#xff0c;MySQL对于我们来说还是一个黑盒&#xff0c;我们只负责使用客户端发送请求并等待服务器返回结果&#xff0c;表中的数据到底存到了哪里&#xff1f;以什么格式存放的&#xff1f;MySQL是以什么方式来访问的这些数据&#xff1f;这些问题我们统…
阅读更多...
springboot构造树形结构数据并查询的方法

springboot构造树形结构数据并查询的方法

因为项目需要，页面上需要树形结构的数据进行展示（类似下图这样），因此需要后端返回相应格式的数据。 不说废话，直接开干！！！ 我这里用的是springboot+mybatis-plus+mysql，示例的接口是查询一级权限以及二级权限、三级权限整个权限树… 下面是导入的maven依赖 <depe…
阅读更多...
SSD核心设计

SSD核心设计

摘要本文介绍了此类设计选择的分类&#xff0c;并使用跟踪驱动的模拟器和从实际系统中提取的工作负载跟踪分析各种配置的可能性能。我们发现SSD性能和生命周期对工作负载非常敏感&#xff0c;并且通常较高的复杂系统问题出现在存储堆栈中甚至在分布式系统中&#xff0c;与设备固…
阅读更多...
9. 回文数

9. 回文数

文章目录题目描述方法一 转换为字符串方法二 转存入数组方法三 数学方法倒转数字方法四 对折参考文献题目描述 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&…
阅读更多...
树脂吸附处理冶炼含钴丨废水四氯化三钴、草酸钴废水回收钴

树脂吸附处理冶炼含钴丨废水四氯化三钴、草酸钴废水回收钴

生产过程中会产生含钴废水&#xff0c;现有技术中&#xff0c;处理含钴废水的方法主要有化学沉淀法、吸附法、膜分离法等。 对于化学沉淀法&#xff0c;原理是通过向废水中添加一定的沉淀剂&#xff0c;使其与废水中溶解性的钴离子反应生成沉淀&#xff0c;通过重力沉降去除钴…
阅读更多...
ArcGIS 前端动态地图与要素服务符号化的区别小结

ArcGIS 前端动态地图与要素服务符号化的区别小结

在ArcGIS中&#xff0c; 除了在桌面端做配图之外&#xff0c;一些符号化工作也可以在代码端去进行设置&#xff0c;这里简单的做了一些测试及小结。 一、服务的区别 在ArcGIS中最基础的两种数据服务就是动态地图服务&#xff08;MapServer&#xff09;和要素服务&#xff08;…
阅读更多...
Spring Boot 教程

Spring Boot 教程

Spring Boot 教程Spring Boot 基础开发Spring Boot 简介Spring Boot 第一个项目Spring Boot 项目启动机制Spring Boot 数据访问Spring Boot 集成 MyBatisSpring Boot 运行管理Spring Boot 日志管理Spring Boot 异常处理Spring Boot 定时任务Spring Boot 使用拦截器Spring Boot …
阅读更多...
C#汽车美容管理服务系统源码 功能强大代码完整，开源分享！

C#汽车美容管理服务系统源码 功能强大代码完整，开源分享！

一套完整的汽车美容管理服务系统源码&#xff0c;专门服务于汽车美容4s店&#xff0c;终端功能强大而又简便实用&#xff0c;界面友好而美观&#xff0c;让用户更好的体验度,基于jquery技术实现页面无刷新,可广泛适用于大型以及小型汽车美容机修等公司&#xff0c;包含 洗车、机…
阅读更多...
【异常】记一次前端因资源无法加载导致白屏异常问题

【异常】记一次前端因资源无法加载导致白屏异常问题

一、背景 自从运维同事强烈要求前端的环境要使用多套的&#xff0c;参考文章 【项目】参考若依的前端框架去多环境 于是一番捣鼓与改造之后&#xff0c;看似已经顺利了 但运维说&#xff0c;前端还是有问题&#xff0c;需要他帮我改下&#xff0c;于是改了如下内容 什么嘛&a…
阅读更多...
常用的git管理逻辑

常用的git管理逻辑

//首先创建新的分支 git branch new_branch//切换到另一个分支 git checkout new_branch//修改代码&#xff0c;添加新的文件 git add .//查看文件的状态 git status//打包自己的改变 git commit -m "comment"//推到远程服务器上 git push origin new_branch// 拉远程…
阅读更多...
2022年度打印机行业数据报告：十大热门品牌销量排行榜

2022年度打印机行业数据报告：十大热门品牌销量排行榜

随着5G技术的发展&#xff0c;越来越多的设备与人员将通过网络实现互联互通&#xff0c;打印的输入端口与输出端口变得多样与兼容&#xff0c;打印机也在越来越多的领域发挥着强大的作用。并且&#xff0c;随着电子化教学的不断推进以及普及&#xff0c;加之线上办公等场景的需…
阅读更多...
Hudi系列2:Hudi安装

Hudi系列2:Hudi安装

文章目录编译环境准备一. 下载并解压hudi二. maven的下载和配置2.1 maven的下载和解压2.2 添加环境变量到/etc/profile中2.3 修改为阿里镜像三. 编译hudi3.1 修改pom文件3.2 修改源码兼容hadoop33.3 手动安装Kafka依赖3.4 解决spark模块依赖冲突3.4.1 修改hudi-spark-bundle的p…
阅读更多...
LeetCode 3. 无重复字符的最长子串

LeetCode 3. 无重复字符的最长子串

&#x1f308;&#x1f308;&#x1f604;&#x1f604; 欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓LeetCode 3. 无重复字符的最长子串&#xff0c;做好准备了么&#xff0c;那么开始吧。 &#x1f332;&#x1f332;&#x1f434;&#x1f434; 目录 一、题目名称…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023