三、嵌套路由(示例)
当我们有多页面时，就可以使用到嵌套路由。
此时我们在App.vue设置一个router-view，其他单独的页面中再嵌套router-view，就能够实现多页面的效果了。(实际上还是单页面，只不过进行了局部刷新罢了)
App.vue：源头，单页面
<template> <div id="nav"> <router-view /> </div> </template> <script> export default { name: "App", components: {}, methods: { linktoHome() { this.$router.push("/home"); }, linktoAbout() { this.$router.push("/About"); }, }, }; </script> <style> </style>
应用于App.vue的about、home：其中about.vue与home.vue你就可以看成是两个页面
router/index.js：路由配置 import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/home/Home.vue' import message from '../views/about/components/message.vue' import banner from '../views/about/components/banner.vue' import news from '../views/home/components/news.vue' const routes = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'Home', component: Home, children: [ { path: '/home/message', component: message } ] }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/about/About.vue'), children: [ { path: '/about/news', component: news }, { path: '/about/banner', component: banner } ] } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router
home目录：
Home.vue <template> welcome home <router-view /> </template> <script> export default { name: "Home", components: {}, mounted() { this.$router.push("/home/message"); }, }; </script>
news.vue：应用于Home.vue
<template> <div> <ul> <li>news1</li> <li>news2</li> <li>news3</li> <li>news4</li> <li>news5</li> </ul> </div> </template> <script> export default { name: "news", }; </script> <style> </style>
about目录：
About.vue <template> welcome about <el-button type="danger" @click="handleclick">点我一下</el-button> <router-view /> </template> <script> export default { name: "About", components: {}, mounted() { this.$router.push({ path: "/about/news", query: { name: "changlu", age: 18, }, }); console.log(this.$route); }, methods: { handleclick() { this.$router.push("/about/banner"); }, }, }; </script> <style> </style>
应用于About.vue的两个局部组件：
message.vue <template> <div> <ul> <li>message1</li> <li>message2</li> <li>message3</li> <li>message4</li> <li>message5</li> </ul> </div> </template> <script> export default { name: "message", }; </script> <style> </style>
banner.vue
<template> <el-carousel indicator-position="outside"> <el-carousel-item v-for="item in 4" :key="item"> <h3>{{ item }}</h3> </el-carousel-item> </el-carousel> </template> <script> export default { name: "banner", }; </script> <style> .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n + 1) { background-color: #d3dce6; } </style>
此时就能够实现多页面！
四、404页面实现
添加一个404组件：
router/index.js：进行路由配置 { path: "/404", name: "notFound", component: notfound }, //匹配没有配置的路由路径 { path: "/:pathMatch(.*)", redirect: '/404' }
五、进阶
5.1、导航守卫
导航守卫
全局前置守卫：一般用于全局，每次跳转一个路由都会触发
// 路由守卫 router.beforeEach((to, from, next) => { const isLogin = localStorage.isLogin //一般是否登陆验证信息放置在localstorage中 // to.name === 'Login'是为了防止拦截死循环！ if (isLogin || to.name === 'Login') { next() // 执行了该函数才会进行跳转 } else { // 跳转至指定login组件 next({ name: 'Login' }) } })
路由独享守卫：针对于某个路由
{ path: '/', name: 'Login', component: Login, beforeEnter: (to, from, next) => { //若是能够登陆直接进行跳转主页 const { isLogin } = localStorage isLogin ? next({ name: 'About' }) : next() } },
组件内的守卫：针对于某个组件
全局后置钩子：路由跳转之后
