1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)

本文主要是介绍1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.VueRouter安装与使用

2.参数传递

创建路由组件

在项目中定义Discover.vue、Friends.vue、My.vue三个组件,将来要使用vue-router来控制它们的展示与切换:

Discover.vue

<template><div><h1>发现音乐</h1></div>
</template>

Friends.vue

<template><div><h1>关注</h1></div>
</template>

My.vue

<template><div><h1>我的</h1></div>
</template>

声明路由链接和占位标签

可以使用<router-link> 标签来声明路由链接,并使用<router-view> 标签来声明路由占位符

App.vue:

<template><div id="app"><!-- 声明路由链接 --><router-link to="/discover"> 发现音乐 </router-link><router-link to="/my"> 我的音乐 </router-link><router-link to="/friends"> 关注音乐 </router-link><!-- 声明路由展位标签 --><router-view></router-view></div>
</template><script>
export default {name: "App",components: {},
};
</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>

Main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = falsenew Vue({render: h => h(App),router: router
}).$mount('#app')

Index.js(在新建的src下面的router文件夹里) 

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from "../components/Discover.vue"
import Friends from "../components/Friends.vue"
import My from "../components/My.vue"Vue.use(VueRouter);const router = new VueRouter({// 指定hash属性与组件的对应关系routes: [{ path: "/discover", component: Discover },{ path: "/friends", component: Friends },{ path: "/my", component: My },],
})
export default router;

测试:

 

3.子路由

嵌套路由 

Discover.vue

<template><div><h1>发现音乐</h1><!-- 子路由链接 --><router-link to="/discover/toplist">推荐</router-link><router-link to="/discover/playlist">歌单</router-link><hr><router-view></router-view></div>
</template>

TopList.vue

<template><h3>推荐</h3>
</template>

PlayList.vue

<template><h3>歌单</h3>
</template>

 index.js:

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from "../components/Discover.vue";
import Friends from "../components/Friends.vue";
import My from "../components/My.vue";
import TopList from "@/components/TopList.vue";
import PlayList from "@/components/PlayList.vue";Vue.use(VueRouter);const router = new VueRouter({// 指定hash属性与组件的对应关系routes: [{ path: "/", redirect: "/discover" },{path: "/discover",component: Discover,//通过children属性,嵌套声明子路由children: [{ path: "toplist", component: TopList },{ path: "playlist", component: PlayList },],},{ path: "/friends", component: Friends },{ path: "/my", component: My },],
});
export default router;

测试:

动态路由

动态路由指的是:把 Hash 地址中可变的部分定义为参数项,从而提高路由规则的复用性。在 vue-router 中使用英文的冒号(:)来定义路由的参数项:

{path:'/product/:id',component:Product}

Product.vue:

<template><h3>商品</h3>
</template>

My.vue:

import VueRouter from 'vue-router';
<template><div><h1>我的</h1><router-link to="/my/1">商品1</router-link><router-link to="/my/2">商品2</router-link><router-link to="/my/3">商品3</router-link><VueRouter></VueRouter></div>
</template>

index.js:

{ path: "/my", component: My },

改成

  {path: "/my",component: My,children: [{ path: ":id", component: Product }],},

或者将Producr.vue改成:

<template><div><h3>商品{{ $route.params.id }}</h3> </div>
</template><script>
export default {props: ["id"],
};
</script>

4.导航守卫

控制路由的访问权限

全局导航守卫会拦截每个路由规则,从而对每个路由进行访问权限的控制.

你可以使用 router.beforeEach 注册一个全局前置守卫

router.beforeEach((to, from, next) => {if (to.path==='/main'&&!isAuthenticated) {next('/login');} else {next();}
});

to:即将要进入的目标
from:当前导航正要离开的路由
在守卫方法中如果声明了 next 形参,则必须调用 next() 函数,否则不允许用户访问任何一个路
        直接放行:next()
        强制其停留在当前页面: next(false)
        强制其跳转到登录页面: next('/login')

这篇关于1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/969474

相关文章

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题:应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案:提前预热各种资源1. Flowable

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方