路由router

news2024/11/19 18:34:26

  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.coloradmin.cn/o/1088811.html

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

相关文章

elementUI el-table+树形结构子节点选中后没有打勾？（element版本问题 已解决）

elementUI el-table+树形结构子节点选中后没有打勾？（element版本问题 已解决）

问题 1.不勾选父级CB111&#xff0c;直接去勾选子级&#xff08;ST2001…&#xff09;&#xff0c;子级选中后没有打勾显示 排查 一直以为是这个树形结构和表格不兼容产生的问题&#xff0c;到后来看官方demo都是可以勾选的&#xff0c;最后排查到了版本问题&#xff0c; 项…
阅读更多...
电动滑板车UL2272认证测试项目和标准

电动滑板车UL2272认证测试项目和标准

平衡车ul2272认证标准于2016年2月正式公布&#xff0c;美国消费品安全协会(cpsc)宣布&#xff0c;所有平衡车(包括扭扭车)的制造商、进口商、经销商&#xff0c;其在美国本土生产、进口、销售的平衡车必须符合新的安全标准&#xff0c;包括ul2272平衡车电路系统认证标准。另外&…
阅读更多...
flutter开发入门，windows环境安装，耗时一天解决各种bug，终于成功

flutter开发入门，windows环境安装，耗时一天解决各种bug，终于成功

首先说明要安装的环境&#xff1a;java8必须&#xff0c;android studio&#xff0c;chrome是开发安卓和web是必须的 java8的下载地址&#xff1a;https://www.java.com/en/download/、 java8蓝奏云下载地址&#xff1a;jre-8u381-windows-x64.exe - 蓝奏云 flutter国内环境…
阅读更多...
lvgl 界面管理器

lvgl 界面管理器

lv_scr_mgr lvgl 界面管理器 适配 lvgl 8.3 降低界面之间的耦合使用较小的内存&#xff0c;界面切换后会自动释放内存内存泄漏检测 使用方法 在lv_scr_mgr_port.h 中创建一个枚举&#xff0c;用于界面ID为每个界面创建一个页面管理器句柄将界面句柄添加到 lv_scr_mgr_por…
阅读更多...
C++11新特性（lambda，可变参数模板，包装器，bind）

C++11新特性（lambda，可变参数模板，包装器，bind）

lambda表达式是什么&#xff1f;包装器又是什么&#xff1f;有什么作用&#xff1f;莫急&#xff0c;此篇文章将详细带你探讨它们的作用。很多同学在学习时害怕这些东西&#xff0c;其实都是方便使用的工具&#xff0c;很多情况下我们学这些新的东西觉得麻烦&#xff0c;累赘&a…
阅读更多...
自学嵌入式多久才可以达到找工作的水平

自学嵌入式多久才可以达到找工作的水平

自学嵌入式多久才可以达到找工作的水平 时间以及达到嵌入式工作水平所需的具体努力因人而异。但一般而言&#xff0c;自学嵌入式系统开发需要时间和毅力。以下是一些关键因素&#xff0c;影响着您能够在多久内达到找工作的水平&#xff1a;最近很多小伙伴找我&#xff0c;说想要…
阅读更多...
YOLOv4 论文总结

YOLOv4 论文总结

贡献&#xff1a; 1.有效且强大的模型&#xff0c;常规GPU&#xff08;1080ti or 2080ti&#xff09;可得到实时、高质量的检测结果。 2.在训练中&#xff0c;验证 Bag-of-Freebies 和 Bag-of-Specials 方法 3.提出了两种数据增强手段&#xff0c;马赛克和自对抗训练&#x…
阅读更多...
LeetCode【74】搜索二维矩阵

LeetCode【74】搜索二维矩阵

题目&#xff1a; 代码&#xff1a; public static boolean searchMatrix(int[][] matrix, int target) {int rows matrix.length;int columns matrix[0].length;// 先找到行&#xff0c;行为当前行第一列<target&#xff0c;当前行1行&#xff0c;第一列>targetfor…
阅读更多...
详细教程：Postman 怎么调试 WebSocket

详细教程：Postman 怎么调试 WebSocket

WebSocket 是一个支持双向通信的网络协议&#xff0c;它在实时性和效率方面具有很大的优势。Postman 是一个流行的 API 开发工具&#xff0c;它提供了许多功能来测试和调试 RESTful API 接口&#xff0c;最新的版本也支持 WebSocket 接口的调试。想要学习更多关于 Postman 的知…
阅读更多...
Linux友人帐之环境变量

Linux友人帐之环境变量

一、环境变量 1.1 环境变量的概念 1. 什么是环境变量&#xff1f; 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数。 2. 为什么会有环境变量&#xff1f; 在Linux系统中&#xff0c;我们发现我们在执行一些指令时&#xff0c;比如…
阅读更多...
10个打工人必备AI神器，升职加薪靠AI

10个打工人必备AI神器，升职加薪靠AI

HI&#xff0c;同学们&#xff0c;我是赤辰&#xff0c;本期是第18篇AI工具类教程&#xff0c;文章底部准备了粉丝福利&#xff0c;看完后可领取&#xff01;1. Runway&#xff08;文字转视频AI工具&#xff09; 只需要一句提示词就能精确生成你所想象的视频场景&#xff0c;还…
阅读更多...
natapp内网穿透-将本地运行的程序/服务器通过公网IP供其它人访问

natapp内网穿透-将本地运行的程序/服务器通过公网IP供其它人访问

文章目录 1.几个基本概念1.1 局域网1.2 内网1.3 内网穿透1.4 Natapp 2.搭建内网穿透环境3.本地服务测试 1.几个基本概念 1.1 局域网 LAN&#xff08;Local Area Network&#xff0c;局域网&#xff09;是一个可连接住宅&#xff0c;学校&#xff0c;实验室&#xff0c;大学校…
阅读更多...
百乐钢笔维修（官方售后，全流程）

百乐钢笔维修（官方售后，全流程）

文章目录 1 背景2 方法3 结果 1 背景 在给钢笔上墨的途中&#xff0c;不小心总成掉地上了&#xff0c;把笔尖摔弯了&#xff08;虽然还可以写字&#xff0c;但是非常的挂纸&#xff09;&#xff0c;笔身没有什么问题&#xff0c;就想着维修一下笔尖或者替换一下总成。 一般维…
阅读更多...
Vulnhub系列靶机---Raven: 2

Vulnhub系列靶机---Raven: 2

文章目录 信息收集主机发现端口扫描目录扫描用户枚举 漏洞发现漏洞利用UDF脚本MySQL提权SUID提权 靶机文档&#xff1a;Raven: 2 下载地址&#xff1a;Download (Mirror) 信息收集 靶机MAC地址&#xff1a;00:0C:29:15:7F:17 主机发现 sudo nmap -sn 192.168.8.0/24sudo arp…
阅读更多...
操作系统中的（进程，线程）

操作系统中的（进程，线程）

操作系统是一个搞管理的软件&#xff0c;它对上给各个应用程序提供稳定的运行环境&#xff1b;对下管理各种硬件设备。 进程 一个操作系统由内核和配套的应用程序组成。而进程就是操作系统内核中众多关键概念中的一个。进程通俗一点来讲就是一个已经跑起来的程序。 每个进程…
阅读更多...
【数据结构与算法】二叉树的镜像实现

【数据结构与算法】二叉树的镜像实现

需求分析&#xff1a; 将所有节点的左子树与右子树交换&#xff0c;以达到交换前与交换后成为镜像的效果。 如图&#xff1a; 实现代码&#xff1a; 先准备一个二叉树具有节点类&#xff0c;添加左右子节点的方法和层序遍历方法。 /*** author CC* version 1.0* since2023/10…
阅读更多...
数学术语之源——“齐次(homogeneity)”的含义

数学术语之源——“齐次(homogeneity)”的含义

1. “homogeneous”的词源 “homogeneous”源自1640年代&#xff0c;来自中古拉丁词“homogeneus”&#xff0c;这个词又源自古希腊词“homogenes”&#xff0c;词义为“of the same kind(关于同一种类的)”&#xff0c;由“homos”(词义“same(相同的)”&#xff0c;参见“ho…
阅读更多...
msvcr110dll是干嘛的，win系统提示缺少msvcr110.dll解决步骤分享

msvcr110dll是干嘛的，win系统提示缺少msvcr110.dll解决步骤分享

今天&#xff0c;要和大家探讨一个非常重要的话题——由于找不到msvcr110.dll无法执行代码的五种解决方案。首先&#xff0c;请允许我为大家简要介绍一下msvcr110.dll这个文件。 msvcr110.dll是Visual Studio 2012的一个动态链接库文件&#xff0c;它是Microsoft Visual C 2012…
阅读更多...
如何报考产品总监认证（UCPD）？

如何报考产品总监认证（UCPD）？

从产品经理到产品总监&#xff0c;是我们职业生涯中锦鲤化龙的一次历程。中、高级管理人员所需要的知识和能力常常会泾渭分明&#xff0c;甚至大相迳庭。所以&#xff0c;当我们走向高级管理岗位前&#xff0c;尤其是有机会应聘大厂总监岗位时&#xff0c;我们需要一张产品总监…
阅读更多...
ESP32网络开发实例-从SPIFFS加载Web页面文件

ESP32网络开发实例-从SPIFFS加载Web页面文件

从SPIFFS加载Web页面文件 文章目录 从SPIFFS加载Web页面文件1、应用介绍2、软件准备3、硬件准备4、Web页面代码与SPIFFS文件系统上传4.1 Web页面代码实现4.2 Web页面代码上传5、Web服务器代码实现在文中，将展示如何构建一个 Web 服务器，为存储在 ESP32 的SPIFFS文件系统中的 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023