Vue (七) vue-route路由

最新推荐文章于 2024-04-18 13:25:12 发布
最新推荐文章于 2024-04-18 13:25:12 发布
阅读量307 收藏 2
点赞数 3
分类专栏： Vue 文章标签： vue.js javascript node.js vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42262081/article/details/120547112
版权

1、安装vue-router

路由，根据不同的访问路径，返回不同的内容，在页面上有两个部分，一个是点击部分，一个是点击之后显示内容的部分。

方式一：使用npm安装

安装命令：

npm install vue-router

在main.js中进行注册

import Vue from 'vue' import VueRouter from 'vue-router'
Vue.use(VueRouter)

方式二：引入全局的 script 标签

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2、vue-router的基本使用

//1、定义路由对应的组件
const Login = {template: `<h1>登录页面</h1>`} 
const Home = {template: `<h1>项目首页</h1>`} 


//2、创建一个路由对象,设置路由匹配规则 
const router = new VueRouter({routes:[{ path: '/login', component: Login },{ path: '/home', component: Home }]})


//3、将路由对象挂载到vue实例中
var vm= new Vue({ el:'#app', router:router })


//4、<router-link></router-link>组件导航、通过传入’to‘属性来指定路径
<router-link to='/login'>登录</router-link>
<router-link to='/home'>首页</router-link>


//5、路由出口，#app中使用<router-view>标签来定义路由展示位，匹配到的路由组件展示到这里
<router-view></router-view>

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to='/login'>
				<button type="button">登录</button>
			</router-link>
			<router-link to='/home'>
				<button type="button">首页</button>
			</router-link>
			
			<!-- 组件展示位 -->
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
		
			//定义路由对应的组件
			 const login = { template:`<h3>登录页面</h3>`}
			 const home = { template:`<h3>首页</h3>`}
		
			// 配置路由访问规则
			const routes = [{path:'/login',component:login},{path:'/home',component:home}]
			
			// 创建一个路由对象,传入配置好的路由规则
			var router = new VueRouter({
				routes:routes
			})
			
			// 创建vue实例，将路由挂载进去
			var vm = new Vue({
				el:'#app',
				router:router
			})
		</script>
	</body>
</html>

在这里插入图片描述

点击登录
在这里插入图片描述
点击首页
在这里插入图片描述

3、路由跳转方式

1.声明式

<router-link to="/login">登录</router-link>

// to后面是一个对象时，要使用属性绑定
<router-link :to="{ path: '/login'}">登录</router-link>

2.编程式
在项目中有些时候需要主动去访问某个路由，比如登录成功之后，需要跳转到项目首页，那么 在 Vue 实例内部，可以调用 this.$router.push ，主动访问某个路由

this.$router.push('/login')

this.$router.push({path: '/login'})

举例：点击登录时跳转至首页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">		
			<!-- 组件展示位 -->
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			//定义路由对应的组件
			const login = {
				template: `<button type="button" @click="login">登录</button>`,
				methods:{
					login() {
						this.$router.push('/home')
					}
				}				
			}
			const home = {
				template: `<h3>首页</h3>`,
			}

			// 配置路由访问规则
			const routes = [{
				path: '/login',
				component: login
			}, {
				path: '/home',
				component: home
			}]

			// 创建一个路由对象,传入配置好的路由规则
			var router = new VueRouter({
				routes: routes
			})

			// 创建vue实例，将路由挂载进去
			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

4、路由重定向

通过redirect可以指定重定向的路由地址

const routes = [{path: '/',redirect: '/login'}]

举例如下：配置路由访问规则，当访问根路径时可以指定到登录路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件展示位 -->
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			//定义路由对应的组件
			const login = {
				template: `<button type="button" @click="login">登录</button>`,
				methods: {
					login() {
						this.$router.push('/home')
					}
				}
			}
			const home = {
				template: `<h3>首页</h3>`,
			}

			// 配置路由访问规则
			const routes = [{
					path: '/login',
					component: login
				}, {
					path: '/home',
					component: home
				},
				{
					path: '/',
					redirect: '/login'
				}
			]

			// 创建一个路由对象,传入配置好的路由规则
			var router = new VueRouter({
				routes: routes
			})

			// 创建vue实例，将路由挂载进去
			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>
	</body>
</html>

5、命名路由

可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称，获取路由时可以通过name。

const routes = [{path: '/login',name:'login',component:login}]

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件展示位 -->
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			//定义路由对应的组件
			const login = {
				template: `<button type="button" @click="login">登录</button>`,
				methods: {
					login() {
						this.$router.push({name:'home'})
					}
				}
			}
			const home = {
				template: `<h3>首页</h3>`,
			}

			// 配置路由访问规则
			const routes = [{
					path: '/login',
					name: 'login',
					component: login
				}, {
					path: '/home',
					name:'home',
					component: home
				},
				{
					path: '/',
					redirect: '/login'
				}
			]

			// 创建一个路由对象,传入配置好的路由规则
			var router = new VueRouter({
				routes: routes
			})

			// 创建vue实例，将路由挂载进去
			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>
	</body>
</html>

6、路由嵌套

一个路由中嵌套多个子路由（一个页面中根据不同的情况显示不同的内容），通过children定义，而路由组件中需要通过< router-view>< /router-view>展示位给子路由预留的位置。

const routes = [
	{path: '/login',
	 name:'login',
	 component:login,
	 children: [{path: '/menu',component: menu}]
	 }]

举例：
当访问home中的子路由menu路径时，内容将展示在home组件中的< router-view>< /router-view>中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件展示位 -->
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			//定义路由对应的组件
			const login = {
				template: `<button type="button" @click="login">登录</button>`,
				methods: {
					login() {
						this.$router.push({
							name: 'home'
						})
					}
				}
			}
			const home = {
				template: `<div>
							 <h3>首页</h3>
							 <div style="height: 100px;width:100px;background-color: #0000FF;">
									<router-view></router-view>
							 </div>
						   </div>`,
			}
			const menu = {
				template: ` <h3>子路由</h3>
				`
			}

			// 配置路由访问规则
			const routes = [{
					path: '/login',
					name: 'login',
					component: login
				}, {
					path: '/home',
					name: 'home',
					component: home,
					children: [{
						path: '/menu',
						component: menu
					}]
				},
				{
					path: '/',
					redirect: '/login'
				}
			]

			// 创建一个路由对象,传入配置好的路由规则
			var router = new VueRouter({
				routes: routes
			})

			// 创建vue实例，将路由挂载进去
			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>
	</body>
</html>

在这里插入图片描述

7、路由动态匹配及参数

1、动态路径匹配
在项目中可能会需要把 /user/1 和 /user/2 都将映射到同一个路由,此时只需要在配置路由规则的时候将user后面的数据参数化处理即可

const routes = [{path: '/user/:id',component: User}]

举例：当访问不同的id时映射到同一个路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			const Home = {
				template: `<h4>首页</h4>`
			}

			const Login = {
				template: `<h4>登录</h4>`
			}
			const User = {
				template: `<h4>用户</h4>`
			}

			const routes = [{
				path: '/',
				component: Home
			}, {
				path: '/login',
				component: Login
			}, {
				path: '/user/:id',
				component: User
			}]


			var router = new VueRouter({
				routes: routes
			})
			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
2、参数传递

<router-link :to="{name:'user',params:{id:111}}">
	<button type="button">用户</button>
</router-link>

this.$router.push({ name:'user',params:{id:111,key:'login'}})

在这里插入图片描述

3、查询参数query
查询参数类似于get请求的参数形式， /user/login/?user=123&pwd=23333

<router-link :to="{name:'user',query:{id:111}}">
	<button type="button">用户</button>
</router-link>

在这里插入图片描述
4、获取参数的值通过$ route.query.参数、$route.params/.参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/">
				<button type="button">首页</button>
			</router-link>
			<router-link :to="{name:'login',query:{user:'test',pwd:'123456'}}">
				<button type="button">登录</button>
			</router-link>
			<router-link :to="{name:'user',params:{id:111}}">
				<button type="button">用户</button>
			</router-link>
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			const Home = {
				template: `<h4>首页</h4>`
			}

			const Login = {
				template: `<h4>登录的参数为：{{$route.query}}</h4>`
			}
			const User = {
				template: `<h4>用户id为：{{$route.params.id}}</h4>`
			}

			const routes = [{
				path: '/',
				component: Home
			}, {
				path: '/login',
				name:'login',
				component: Login
			}, {
				path: '/user/:id',
				name: 'user',
				component: User
			}]


			var router = new VueRouter({
				routes: routes
			})
			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在方法中获取值：

method:{
		login(){
				this.$route.query
				}
			}

8、路由导航守卫

路由全局前置拦截器： router.beforeEach
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，vue-router提供了全局前置导航钩子 beforeEach

router.beforeEach((to, from, next) => {
 // to:表示将要访问的路径 
 // from 代表从哪个路径而来 
 // next 是一个函数，表示执行下一步
 //判断是否访问的是登录页面 
 if (to.path === '/login') return next() 
 // 判断当前是否能获取到token 
 if (window.sessionStorage.getItem('token')) return next() 
 // 没有token，则跳转到登录页面
 return next('/login') })
久醉绕心弦，
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue系列 —— vue-route详细使用方法
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航
YK菌的博客
02-25 2942
学习Vue-router
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）进一步详解】
小田是个程序员的博客欢迎你的到来呀~
03-23 3万+
文章主要从Vue-router（路由）常用的几个属性以及参数配置出发，更深一层了解路由在实际开发中的使用，结合实例向大家说明路由常用的参数配置，以及使用路由的一些小技巧。
Vue-Router路由所有相关方法讲解(全)，实战教学含登录拦截，万字长文，建议收藏_router方法
最新发布
m0_60144796的博客
04-18 487
router-link to="/home" tag="button">首页// this.$router.push({path:‘/home’})//以对象的方式跳转。用户// 全局配置激活路由的class类名，处与活跃（动态）就会用上这个类名。router.push(‘/home’)//祖父串的方式进行跳转。// 在函数中，通过组件实例对象下的。// 2.创建Router对象。user1:‘一’,
vue中$router和$route的基本使用
Evan's Blog ٩(๑❛ᴗ❛๑)۶
11-26 1万+
发现在自己在前端的道路上要一去不复返了，好了废话少说，开始记录。 如果大家有什么问题，欢迎给我留言，一起交流探讨。: ) 一、路由基本概念 1.route，表示一条路由信息。 { path: '/home', component: Home } 2.routes，表示一组路由信息。 const routes = [ { path: '/home', component: H...
Vue路由（vue-router）
weixin_61562639的博客
08-23 464
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。route：首先它是个单数，译为路由，可以理解为单个路由或者某一个路由；例如Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。routes：它是个复数，表示多个的集合才能为复数；可以理解为多个路由的集合，官方定义routes是一个数组；所以routes表示多个路由(route)的集合；
Vue路由（二）
PHPer修炼之路
05-19 809
使用nginx部署项目 web服务器： TOMCAT java html APache PHP html java IIS asp 和 asp.net undowtow java nodejs 它可以部署web服务器 nginx html php 部署前端，比较流行的一个web服务器 启动 CD到nginx目录 执行 nginx 或者 start nginx 或者 直接运行nginx.exe 关闭 nginx -s stop 或 任务管理器 ctrl+alt+esc location / { root
vue路由插件之vue-route
10-16
主要介绍了vue路由插件之vue-route的相关知识，本文通过实例代码给大家介绍了vue router的使用，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
vue3-element-plus-im vue3.0 element-plus vue-cli vue-route.zip
03-03
Vue Router 提供了动态路由匹配、命名视图、路由懒加载等功能，使得应用程序的页面跳转和状态管理更为有序。 5. **项目结构**： "vue3-element-plus-im-main" 这个文件名可能是项目的主要入口文件或者项目目录，...
在vue-route路由组件中进行分页.pdf
08-20
在vue-route路由组件中进行分页
Vue-router基本使用
qq_25856179的博客
04-25 1310
文章目录嵌套路由路由文件拆分 嵌套路由     vue-router官方提供了路由嵌套的基本操作。链接。     下面演示如何将几个相关的基础路由合并成一个嵌套路由： //有以下路由信息 const loginRouter = [ { path: '/login', name: 'Login', component: Login }, { path: '/login/pc',
Vue中的router路由
09-17 2976
目录 一，vue-router路由 二，vue-router路由常用配置 三，vue-router路由嵌套 四，vue-router路由参数传递与获取 五，使用props替代路由对象获取参数 六，路由的动态跳转 七，路由&过渡 一，vue-router路由 vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用； 单页应用：Single Page...
Vue入门十三、路由的传参和取参
weixin_33770878的博客
06-11 154
1、查询参login?id=12345 配置：（传参）:to="{name:'login', query:{id:'loginid'}}"获取：（取参）this.$route.query.id 2、路由参数 配置：（传参）:to="{name:'login', params:{id:'loginid'}}"获取：（取参）this.$route.params.id 3、路径参数register/re...
vue路由添加.html,vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式...
weixin_30934229的博客
06-25 1071
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_31906983/article/details/89054798工作中我们经常会遇到这种需求，后台定义用户的权限数据，前端进行获取，并渲染在侧边栏导航上，不同权限的用户看到的侧边栏是不同的。即前端渲染的数据是随着后台的改变而改变的，做...
Vue中路由的使用
lovewulibingbing的博客
03-30 141
什么是路由？ 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由） 路由的基本使用 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRo
路由守卫的简单使用-登录功能
weixin_45369499的博客
05-21 1361
    在用户进入我们系统的时候，需要验证是否已经登录，再来进行相应的跳转。如果使用传统的方式来逐一进行判断验证，是极为麻烦的，于是有了路由守卫，话不多说，直接上代码： 1.login.vue登录界面     因为时间关系，所以就简单的写了一个输入框和一个登录按钮… <template> <div id="login"> <div class="login-box">
Vue路由（vue-router）详细讲解指南
weixin_30502157的博客
09-21 2156
中文文档：https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单...
vue2+vue-route+axios+element-ui的音乐播放器
05-20
2. 安装vue-route，创建路由文件router.js，并在main.js中引入。 3. 创建组件文件夹，包括音乐播放器组件、音乐列表组件、歌词组件等。 4. 使用axios向后端请求音乐数据，将返回的数据存储在vuex中，并在音乐列表...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

久醉绕心弦，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值