`vue-router`路由管理器

已于 2023-04-11 17:28:34 修改
阅读量81 收藏
点赞数
分类专栏： # Vue 文章标签： 前端 vue
于 2023-04-11 17:15:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39375532/article/details/130088706
版权

说明：

vue前端开发可能使用的一个模块，用于页面跳转

  • 官方文档：https://router.vuejs.org/zh/introduction.html

1. 常用方法

（1）vue-router

方法说明
createRouterrouter工厂，对router进行配置。返回router
createWebHashHistoryvue-router历史记录对象工厂，对router中history属性进行配置。（访问的路由中自带#号）
createWebHistory说明：vue-router历史记录对象工厂，对router中history属性进行配置。（访问的路由中不带#号）
useRouter获取router，setup（）中使用
useRoute获取route，setup（）中使用
onBeforeRouteUpdate导航钩子，在当前位置即将更新时触发。只能在vue 文件setup()内进行实现。

（2）router

  • router ： vue-router的属性，可通过createRouter()，useRouter()实例化或直接this.$router获取
方法说明
beforeEach(to,from,next)router钩子，在任何导航前执行，一般在配置文件中设置；可用于进行权限验证
（如：点某页面时，判断是否登录，未登录则跳转到登录界面）示例1
afterEach(to,from,failure)router钩子，每次导航执行后调用，一般在配置文件中设置；示例2
push(to)通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。示例3
path
name
meta.元数据名
params.属性名		示例4

1）示例1

  • 说明：beforeEach（to，from，next）登录判断示例
// beforeEach方法重写
router.beforeEach((to, from, next) => {
    // to : 要去哪的route对象
    // from : 来自哪的route对象
    // next: 导航守卫next对象，此处用于设置接下来要跳转的页面 next(routes中path)
    document.title = `${to.meta.title} | vue-manage-system`;
    // localStorage 为 OM API 在 Login.vue 中设置了值
    // ms_username  key的值为登录的username
    const role = localStorage.getItem('ms_username');
    if (!role && to.path !== '/login') {
        next('/login');
    } else if (to.meta.permission) {
        // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
        role === 'admin'
            ? next()
            : next('/403');
    } else {
        next();
    }
});

2）示例2

  • 说明：afterEach（to，from，failure）示例
// afterEach方法重写
router.afterEach((to, from, failure) => {
    // to : 要去哪的route属性
    // from : 来自哪的route属性
    // failure : 错误信息属性
  if (isNavigationFailure(failure)) {
    console.log('failed navigation', failure)
  }
})

3）示例3

  • 说明：push（to）示例
// push方法调用
import {  useRouter } from "vue-router";
const router = useRouter()

// to : 要去哪的route属性
router.push(to) 

// 直接写路径path,根据path跳转
router.push({path: 'home'})
router.push('home') // 

// 根据name跳转
router.push({ name: 'user', params: { userId: 123 }})

4）示例4

// 调用
import { useRoute } from "vue-router";
const route = useRoute()

    route.path // 设置获取 route的path值
    route.name // 略
    route.meta.元数据名 // 略
    route.params.属性名 // 略

2. vue-router的标签

（1）<router-link>

<router-link to="xxx"></router-link> 
// 相当于 a标签
// to="{name='路由路径',params:{json数据}}" 或 to="路由路径"

（2）<router-view>

  • 说明：视图标签，<router-link>访问组件页面显示位置占位标签（相当于占位符）

1）命名视图

  • 应用场景：有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

2）示例

<!-- 示例1 -->
<router-view />
<!-- 示例2 -->
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>

<!-- 示例3 -->
<router-view v-slot="{ Component }">                
    <transition name="move" mode="out-in">
<!-- 设置 保持生存状态的组件，避免路由跳转后，原视图组件内数据丢失-->
<!--  include接收一个数组 ,其内元素为routes中的name值-->                       
        <keep-alive :include="xxx">                         
            <component :is="Component" />                  
        </keep-alive>                 
    </transition>
</router-view>

<!--


说明：`<router-view>` 暴露了一个 `v-slot` API，主要使用 `<transition>` 和 `<keep-alive>` 组件来包裹你的路由组件。
`Component`: 要传递给 `<component>` 的 VNodes `是` prop。
`route`: 当前新跳转页面的route对象。`route.meta.transition`未定义默认为`default`
`name`：命名视图，默认为 `default`
`include`：设置 保持生存状态的组件，避免路由跳转后，原视图组件内数据丢失
`is`：设置，要加载的视图组件Component


-->

3. 应用

（1）安装

npm install vue-router --save-dev

（2）配置文件格式

  • 文件名：index.js
  • 位置：src/config/router
import {createRouter, createWebHistory} from "vue-router";

const routes = [
{
        path: "/",
        name: "Home",
        component: "../views/Home.vue",
        // 地址重定向
        redirect: '/dashboard'，
        children: [
            {
                path: "/dashboard",
                name: "dashboard",
                meta: {
                    title: '系统首页'
                },
                component: () => import ("../views/Dashboard.vue")
            }
        ]
    },
    {path: '*',component: "../views/404.vue"}
];

const router = createRouter({
    history: createWebHistory(),
    routes: routes
});

router.beforeEach((to, from, next) => {
    // to : 要去哪的route对象
    // from : 来自哪的route对象
    // next: 导航守卫，此处用于设置接下来要跳转的页面

});

export default router;

（3）挂载

  • 文件：main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 目录路径，自动扫描目录下配置文件



let app =createApp(App);
app.use(router);
app.mount('#app');

（4）使用

// ----------------视图层-----------

<router-link to="xxx"></router-link> 
// 相当于 a标签
// to="{name='路由路径',params:{json数据}}" 或 to="路由路径"


<router-view></router-view>  // <router-link>访问组件页面显示位置占位标签（相当于占位符） 

// ----------模型层-----------



// 导入
import {useRoute,useRouter} from 'vue-router'

this.$router.xx
this.$route.xx

const route = useRoute()
const router = useRouter()

4. 示例

说明

  1. 有5个组件，分别为，App.vue（已存在不用新建）， Main首页页面组件，messageSelect内容选择组件，messageOne内容组件和messageOne内容组件。

  2. 为三层路由嵌套

image-20220603144549258

vue-router

（1）基本步骤

  1. 安装模组
  2. 新建4个组件
  3. 配置vue-router：自定义配置文件
  4. 挂载vue- router配置：编写main.js
  5. 页面编写：编写App.vue

（2）安装

npm install vue-router --save-dev

（3）新建组件

  • 文件名：Main.vue和Message.vue
  • 位置：component目录下
<!-- Main.vue 首页页面组件 -->
<template>
	<h1>首页</h1>
	
</template>

<script>
</script>
<style>
</style>

<!-- MessageSelect.vue messageSelect页面组件 -->
<template>
	<h1>MessageSelect</h1>
	<router-link to="/messageOne">查看信息1</router-link>- 
	<router-link to="/messageTwo">查看信息2</router-link>
	<router-view></router-view>
</template>

<script>
	
</script>
	
<style>
</style>

<!-- MessageOne.vue messageOne页面组件 -->
<template>
	<h2>信息1</h2>
</template>

<script>
</script>

<style>
</style>

<!-- MessageTwo.vue messageTwo页面组件 -->
<template>
	<h2>信息2</h2>
</template>

<script>
</script>

<style>
</style>

（4）配置

  • 文件名：index.js
  • 位置：根目录/router/
/* 路由配置 */

import Vue from "vue"
import {createRouter,createWebHistory} from "vue-router"
import MessageSelect from "../components/MessageSelect.vue"
import Main from "../components/Main.vue"
import MessageOne from "../components/MessageOne.vue"
import MessageTwo from "../components/MessageTwo.vue"

// 配置导出对象
const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '', 
			component: Main,
			children:[ // 子路由,该路由组件下有其他路由组件时使用
			{
				// 路由路径， 访问路径
				path: '/message',
				// 路径组件
				component: MessageSelect,
				children:[ // 子路由,该路由组件下有其他路由组件时使用
					{path: '/messageOne',component: MessageOne},
					{path: '/messageTwo',component: MessageTwo}
					
				]
			}
			]
		
		}
	]
})

export default router

（5）挂载

  • 文件名：main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 目录路径，自动扫描目录下配置文件



let app =createApp(App);
app.use(router);
app.mount('#app');

（6）页面编写

  • 文件名：app.vue
<template>
	<div id="app">
		<router-view></router-view>	
	</div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

（7）路由传值

注意：有些是route有些是router

1）方式一

  • 说明：router-link路由导航方式

适用于传递少量参数时

// 父组件
<router-link to = "/跳转路径/传入的参数"></router-link>
// 或
<router-link to = "/跳转路径" params="{num:值}"></router-link> 

// 路由配置
{path: '/跳转路径/:num', name: A, component: A, props:true}


// 子组件 获取
<template>
	<div>
    	// 子组件 template模板中直接使用 
		{{this.$route.params.num}}
        
        // 或 若路由配置有props:true
 		{{num}}
 	</div>
</template>
<script>
	export default {
        // 或 若路由配置有props:true
        props: ['num'],
        name: "xxx",
        methods:{
             // 或 script函数中调用
			func(){
			let result = this.$route.params.num;
			}  
        }      
    }	
</script>

2）方式二

  • 说明：调用$router.push路径传参方式
// 父组件
<button @click="deliverParams(123)">push传参</button>

  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/跳转路径/${id}`
      })
    }
  }

// 路由配置
{path: '/跳转路径/:num', name: A, component: A, props:true}


// 子组件 获取
<template>
	<div>
    	// 子组件 template模板中直接使用 
		{{this.$route.params.num}}
        
        // 或 若路由配置有props:true
 		{{num}}
 	</div>
</template>
<script>
	export default {
        // 或 若路由配置有props:true
        props: ['num'],
        name: "xxx",
        methods:{
             // 或 script函数中调用
			func(){
			let result = this.$route.params.num;
			}  
        }      
    }	
</script>

3）方式三

  • 说明：调用$router.push用params传参
<button @click="deliverByName()">params传参</button>

    deliverByName () {
      this.$router.push({
        name: '跳转路径',
        params: {
          num: 123
        }
      })
    }
    
// 路由配置
{path: '/跳转路径/', name: A, component: A, props:true}


// 子组件 获取
<template>
	<div>
    	// 子组件 template模板中直接使用 
		{{this.$route.params.num}}
        
         // 或 若路由配置有props:true
 		{{num}}
 	</div>
</template>
<script>
	export default {
        // 或 若路由配置有props:true
        props: ['num'],
        name: "xxx",
        methods:{
             // 或 script函数中调用
			func(){
			let result = this.$route.params.num;
			}  
        }      
    }	
</script>

4）方式四

  • 说明：调用$router.push用query传参
<button @click="deliverByName()">params传参</button>

    deliverByName () {
      this.$router.push({
        name: '跳转路径',
        query: {
          num: 123
        }
      })
    }
    
// 路由配置
{path: '/跳转路径/', name: A, component: A, props:true}


// 子组件 获取
<template>
	<div>
    	// 子组件 template模板中直接使用 
		{{this.$route.params.num}}
        
        // 或 若路由配置有props:true
 		{{num}}
    </div>
</template>
<script>
	export default {
        // 或 若路由配置有props:true
        props: ['num'],
        name: "xxx",
        methods:{
             // 或 script函数中调用
			func(){
			let result = this.$route.params.num;
			}  
        }      
    }	
</script>
水流木—LJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-router 路由传参
且听风吟的博客
03-25 8481
vue-router传递参数分为两大类： 编程式的导航 router.push 声明式的导航 <router-link>
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
vue-router 路由超详细教程
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue-router路由懒加载
longgege001的博客
10-11 1万+
vue-router路由懒加载实践，vue-router路由实现原理简单说明
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 3720
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
vue3:vue-router路由的使用
米儿的博客
08-04 3万+
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...
vue-router动态路由实践
Bennett_G博客
01-09 2万+
vue动态路由 vuex 路由数据(demo) 贡献本人于服务端约定的路由数据结构，仅供参考
vue-router路由缓存
二七二十七的博客
07-27 2569
路由缓存通过``标签中的include属性实现，指定include属性的属性值为需要进行缓存的组件名
超全详解vue-router路由
是阿瑶的博客呀~
11-06 2022
1. 什么是路由? 路由就是路径和组件的映射关系 1.1 为什么使用路由? -->在一个页面里, 切换业务场景 单页面应用(SPA): 所有功能在一个html页面上实现 前端路由作用: 实现业务场景切换 1.2 路由 - 组件分类 .vue文件分2类, 一个是页面组件, 一个是复用组件 .vue文件本质无区别, 方便学习和理解, 总结的一个经验 src/views(或pages) 文件夹 和 src/components文件夹 页面组件 - 页面展示 - 配合路由用 ..
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
Vue3的vue-router路由详解
月影WEB的博客
05-16 3万+
这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发，有基础的可以跳过【三分钟快速搭建Vue3+webpack项目】，直接看以下的内容。 Vue3的vue-router路由详解： 首先安装路由依赖模块： npm install vue-router@4 所需代码文件如下图： 图1 所需要的主要文件：index.html、index.js、App.vue index.html：模板页面，项目中的代码编译之后都是放入到模板页面中id为app的元素这种。 代码如下：..
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 468
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1015
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 575
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
前端JS总结（中）
最新发布
m0_54066656的博客
08-12 592
前端JS之内置对象总结，这很重要！！！
vue-router路由执行流程
05-27
Vue-Router是Vue.js官方提供的路由管理器，它可以方便地实现前端路由功能。Vue-Router的路由执行流程如下： 1. 创建VueRouter实例。在Vue应用中使用VueRouter，需要先创建一个VueRouter实例，可以在main.js文件中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值