路由router

  1. 什么是路由?

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

2、安装\引入\基础使用
只有vue-router3，才能应用于vue2；vue-router4可以应用于vue3中

这里我们安装vue-router3：npm i vue-router@3

引入vue-router：在入口js中引入：import VueRouter from 'vue-router'

vue.use(VueRouter)

 

多级路由

即是由多个路由相互嵌套而形成的

Banner作为title直接在App.vue中实现

然后是About和Home作为路由组件在App.vue中。

message和news继而继续嵌套在home中

main.js

import Vue from 'vue'
import App from './App.vue'//引入VueRouter
import VueRouter from 'vue-router'//引入路由器
import router from './router'Vue.config.productionTip = false//应用插件
Vue.use(VueRouter)new Vue({el:"#app",render: h => h(App),router
})

App.vue

<template><div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about"> 			About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>
import Banner from './components/Banner.vue'export default {name:'App',components:{Banner,}}
</script>

router/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'const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News,},{path:'message',component:Message,}]}]
})export default router

Banner.vue

<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div>
</template><script>
export default {name:'Banner'
}
</script><style></style>

About.vue

<template><h2>我是About的内容</h2>
</template><script>
export default {name:'About'}
</script>

Home

<template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item " active-class="active" to="/home/message">Message</router-link></li></ul><ul><router-view></router-view></ul></div></div></template><script>export default {name:'Home'}
</script>

message

<template><div><div><ul><li><a href="/message1">message001</a>&nbsp;&nbsp;</li><li><a href="/message2">message002</a>&nbsp;&nbsp;</li><li><a href="/message/3">message003</a>&nbsp;&nbsp;</li></ul></div></div>
</template><script>
export default {name:'Mesage',
}
</script><style></style>

news

<template><ul><li>news001</li><li>news002</li><li>news003</li></ul>
</template><script>
export default {name:'News',
}
</script><style></style>

query的传参

若是有很多的嵌套的情况下，一直如上嵌套是不现实的，所以可以通过传参的方法，将需要传递的参数直接带到下一个页面中

下例即是在message下继续嵌套

index.js（引入继续嵌套的detail）

//该文件专门应用于创建整个应用的路由器
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:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News,},{path:'message',component:Message,children:[{path:'detail',component:Detail,}]}]}]
})export default router

message（传递query参数）

<template><div><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带query参数，to的字符串写法 --><!-- <router-link  :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; --><!-- 跳转路由并携带query参数，to的对象写法 --><router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}}">{{m.title}}</router-link></li></ul><hr><router-view></router-view></div></div>
</template><script>
export default {name:'Mesage',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'},]}}
}
</script><style></style>

detail（接收参数）

<template><ul><li>消息编号:{{$route.query.id}}</li><li>消息标题:{{$route.query.title}}</li></ul>
</template><script>
export default {name:'Detail',mounted(){console.log(this.$route)}}
</script><style></style>

replace 

类似于无痕浏览，即当前的router-link标签若加上了这个，则当前对该标签的操作是不可追回的

App。vue

<template><div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link replace class="list-group-item" active-class="active" to="/about"> 			About</router-link><router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>
import Banner from './components/Banner.vue'export default {name:'App',components:{Banner,}}
</script>

activated和deactivated

这是路由组件中两个独有的生命周期钩子，用于捕获路由组件的生命周期状态

  1. 具体使用：
    1. activated路由组件被激活时触发
    2. deactivated路由组件失活时触发

News

<template><ul><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(){console.log('News组件被激活了')},deactivated(){console.log('News组件失活了')}
}
</script>

路由守卫

例子：在淘宝中，若是不经过登录，则是无法跳转到个人中心页面，即使点击个人中心，也是不能的，这就是路由守卫

前置首位

index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
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:{isAuth:true}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth: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)if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对，无权限查看')}}else{next()}
})export default router

全局守卫

对路由组件权限的控制

index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
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:{isAuth:true,title:'新闻'}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'详情'},props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})//全局前置路由守卫--初始化时被调用，每次路由切换之前被调用
router.beforeEach((to,from,next)=>{console.log('前置路由守卫',to,from)if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对，无权限查看')}}else{next()}
})//全局后置路由守卫--初始化时被调用，每次路由切换之后被调用
router.afterEach((to,from)=>{console.log('后置路由守卫',to,from)document.title=to.meta.title
})export default router

独享路由守卫，针对于特别需求坐单独的路由守卫

index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
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:{isAuth:true,title:'新闻'},beforeEnter: (to, from, next) => {console.log('前置路由守卫',to,from)if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对，无权限查看')}}else{next()}}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'详情'},props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})// //全局前置路由守卫--初始化时被调用，每次路由切换之前被调用
// router.beforeEach((to,from,next)=>{
//  console.log('前置路由守卫',to,from)
//  if(to.meta.isAuth){  //判断是否需要鉴权
//     if(localStorage.getItem('school')==='atguigu'){
//         next()
//      }
//      else{
//         alert('学校名不对，无权限查看')
//      }
//  }
//  else{
//     next()
//  }
// })// //全局后置路由守卫--初始化时被调用，每次路由切换之后被调用
// router.afterEach((to,from)=>{
//     console.log('后置路由守卫',to,from)
//     document.title=to.meta.title
// })export default router

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

stm32学习笔记：EXIT中断

stm32学习笔记：EXIT中断

1、中断系统 中断系统是管理和执行中断的逻辑结构&#xff0c;外部中断是众多能产生中断的外设之一。 1.中断&#xff1a; 在主程序运行过程中&#xff0c;出现了特定的中断触发条件 (中断源&#xff0c;如对于外部中断来说可以是引脚发生了电平跳变&#xff0c;对于定时器来…
阅读更多...
Puppeteer结合测试工具jest使用（四）

Puppeteer结合测试工具jest使用（四）

Puppeteer结合测试工具jest使用&#xff08;四&#xff09; Puppeteer结合测试工具jest使用&#xff08;四&#xff09;一、简介二、与jest结合使用&#xff0c;集成到常规测试三、支持其他的几种四、总结 一、简介 Puppeteer是一个提供自动化控制Chrome或Chromium浏览器的Node…
阅读更多...
windows10系统-16-制作导航网站WebStack-Hugo

windows10系统-16-制作导航网站WebStack-Hugo

上个厕所功夫把AI导航搞定了 使用Hugo搭建静态站点 如何使用Hugo框架搭建一个快如闪电的静态网站 1 Hugo 参考Hugo中文文档 参考使用Hugo搭建个人网站 Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。 1.1 安装Hugo 二进制安装&#xff08;推荐…
阅读更多...
Android 内容提供者和内容观察者：数据共享和实时更新的完美组合

Android 内容提供者和内容观察者：数据共享和实时更新的完美组合

任务要求 一个作为ContentProvider提供联系人数据另一个作为Observer监听联系人数据的变化&#xff1a; 1、创建ContactProvider项目&#xff1b; 2、在ContactProvider项目中用Sqlite数据库实现联系人的读写功能&#xff1b; 3、在ContactProvider项目中通过ContentProvid…
阅读更多...
Linux网络编程系列之UDP组播

Linux网络编程系列之UDP组播

Linux网络编程系列 &#xff08;够吃&#xff0c;管饱&#xff09; 1、Linux网络编程系列之网络编程基础 2、Linux网络编程系列之TCP协议编程 3、Linux网络编程系列之UDP协议编程 4、Linux网络编程系列之UDP广播 5、Linux网络编程系列之UDP组播 6、Linux网络编程系列之服务器编…
阅读更多...
接口测试文档

接口测试文档

接口测试的总结文档 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xff1a;主要介绍为什…
阅读更多...
ChatGPT，AIGC 数据库应用 Mysql 常见优化30例

ChatGPT，AIGC 数据库应用 Mysql 常见优化30例

使用ChatGPT，AIGC总结出Mysql的常见优化30例。 1. 建立合适的索引：在Mysql中，索引是重要的优化手段，可以提高查询效率。确保表的索引充分利用，可以减少查询所需的时间。如：create index idx_name on table_name(column_name)； 2. 避免使用select * ：尽可能指定要返回的…
阅读更多...
windows计划任务的配置文件

windows计划任务的配置文件

界面操作 创建计划 依次设置 命令行操作 SCHTASKS 命令简介 SCHTASKS 命令是由微软公司开发并内置于 Windows 系统中的一个命令行工具。该命令可用于设置、修改、查询和删除计划任务&#xff0c;或启动计划任务中所定义的程序或脚本。 SCHTASKS 命令的基本语法 SCHTASKS 命…
阅读更多...
ios设备管理软件iMazing 2.17.11官方中文版新增功能介绍

ios设备管理软件iMazing 2.17.11官方中文版新增功能介绍

iMazing 2.17.11官方中文版(ios设备管理软件)是一款管理苹果设备的软件&#xff0c; Windows 平台上的一款帮助用户管理 IOS 手机的应用程序&#xff0c;软件功能非常强大&#xff0c;界面简洁明晰、操作方便快捷&#xff0c;设计得非常人性化。iMazing官方版与苹果设备连接后&…
阅读更多...
win11的右键菜单改成win10的样子

win11的右键菜单改成win10的样子

在终端复制一下命令 reg add “HKCU\Software\Classes\CLSID{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32” /f /ve 回车&#xff0c;会显示成功 再重启资源管理器。这步必须执行&#xff0c;否则是成功的&#xff0c;或者可能重启电脑会成功&#xff0c;但是我没有…
阅读更多...
知识付费小程序的推广与用户增长策略

知识付费小程序的推广与用户增长策略

在知识付费小程序开发完成后&#xff0c;推广和用户增长是关键的成功因素。本文将探讨一些推广策略和用户增长方法&#xff0c;并提供代码示例&#xff0c;帮助您在知识付费小程序中实施这些策略。 1. 社交媒体分享功能 在知识付费小程序中添加社交媒体分享功能&#xff0c;…
阅读更多...
Spring framework Day11:策略模式中注入所有实现类

Spring framework Day11:策略模式中注入所有实现类

前言 什么是策略模式&#xff1f; 策略模式&#xff08;Strategy Pattern&#xff09;是一种面向对象设计模式&#xff0c;它定义了算法族&#xff08;一组相似的算法&#xff09;&#xff0c;并且将每个算法都封装起来&#xff0c;使得它们可以互相替换。策略模式让算法的变…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023