Vue-路由对象vue-router的基本使用

最新推荐文章于 2023-10-20 15:37:01 发布
最新推荐文章于 2023-10-20 15:37:01 发布
阅读量233 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Binglili0809/article/details/112529448
版权

前端路由： 根据不同分Hash地址，切换不同的组件

监听Hash值的改变切换不同组件

hash值改变时触发
window.onhashchange = function(){
location.hash（获取hash值）
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue-2.4.0.js"></script>
	</head>
	<body>
		<div id="app">
			<a href="#/a">a</a>
			<a href="#/b">b</a>
			<a href="#/c">c</a>
			
			<component :is="comname"></component>
		</div>
		
		<script type="text/javascript">
			Vue.component('com1', {
				template: '<h3>组件a</h3>'
			})
			
			Vue.component('com2', {
				template: '<h3>组件b</h3>'
			})
			
			Vue.component('com3', {
				template: '<h3>组件c</h3>'
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
					comname: 'com1'
				},
				methods: {},
				mounted(){
					window.onhashchange = () => {
						// console.log(location.hash);
						switch(location.hash){
							case '#/a':
								this.comname = 'com1';
								break;
							case '#/b':
								this.comname = 'com2';
								break;
							case '#/c':
								this.comname = 'com3';
								break;
						}
					}
				}
			})
		</script>
	</body>
</html>

vue-router的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue-2.4.0.js"></script>
		<!-- 1、导入vue-router.js -->
		<script src="../lib/vue-router-3.0.1.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 6、表示路由连接， router-link标签默认渲染为 a标签 -->
			<!-- teg属性改变默认渲染的标签 -->
			<router-link to="/login" teg="span">登录</router-link>
			<router-link to="/reg">注册</router-link>
			
			<!-- 5、<router-view>标签 相当于路由的容器。用来把匹配到hash值的组件，呈现到这个容器中 -->
			<!-- <router-view>默认不会渲染成任何标签 -->
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
			// Vue.component('login', {
			// 	template: '<h3>登录组件</h3>'
			// });
			// Vue.component('reg', {
			// 	template: '<h3>注册组件</h3>'
			// });
			
			// 2、创建对应的组件对象
			const login = {
				template: '<h3>登录组件</h3>'
			};
			const reg = {
				template: '<h3>注册组件</h3>'
			};
			
			// 3、创建一个路由对象。当导入完 vue-router 之后，在浏览器全局，就有了 VueRouter 构造函数了
			// 可以监听到hash值改变
			const router = new VueRouter({
				routes: [//路由规则的数组
					{path: '/login', component: login},//路由规则中，path表示要匹配的hash值。component表示hash值对应的要展示的组件对象
					{path: '/reg', component:reg},
					// 挂载好的路由，想要在页面中展示出来，需要用到<router-view>标签
				]
			});
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router//4、想要路由在页面指定部分使用，需要在该实例中，通过router属性挂载到这个实例中
				// 属性名和属性值一样，可以简写为router
			})
		</script>
	</body>
</html>

路由切换选中状态的高亮样式、切换的动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue-2.4.0.js"></script>
		<script src="../lib/vue-router-3.0.1.js"></script>
		<style type="text/css">
			.my-active{
				font-size: 30px;
				color: #DDA0DD;
			}
			
			.v-enter{
				opacity: 0;
				transform: translateX(100px);
			}
			.v-leave-to{
				opacity: 0;
				transform: translateX(-100px);
			}
			
			.v-enter-active,
			.v-leave-active{
				position: absolute;
				transition: all 0.5s ease;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<router-link to="/login" tag="span">登录</router-link>
			<router-link to="/reg">注册</router-link>
			
			<transition mode="out-in">
				<router-view></router-view>
			</transition>
		</div>
		
		<script type="text/javascript">
			const login = {
				template: '<h3>登录组件</h3>'
			};
			const reg = {
				template: '<h3>注册组件</h3>'
			};
			
			const router = new VueRouter({
				routes: [
					// {path: '/', component: login},
					{path: '/', redirect: '/login'},//当监听到路径为根路径的时候，重新跳转到 '/login' 路径
					{path: '/login', component: login},
					{path: '/reg', component: reg}
				],
				linkActiveClass: 'my-active'
			})
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router
			})
		</script>
	</body>
</html>
Binglili0809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由和路由嵌套
weixin_45441561的博客
11-21 335
###1.vue路由 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash值(锚链接)的变化进行实现 后端路由性能相对前端路由来说较低，所以，我们接下来...
vue-auto-routing：自动生成Vue路由器路由
02-27
安装$ npm install -D vue-auto-routing要求webpack> = v4.0.0用法vue-auto-routing通过使用自动解析Vue路由器路由。 路由是使用与相同的规则生成的。 要使用此功能，请导入vue-auto-routing并将其传递到Vue Router...
javascript 实现Vue.js路由
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-12 1282
javascript 原生实现 Vue.js的路由切换功能，模拟单页应用 上效果图： 源码如下： <!-- author:helang Email:[email protected] --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
vue路由传递对象数组，刷新页面，数据丢失[object Object](问题篇)
skyblue_afan的博客
08-30 8390
1、router路由编程式传参，一般两种方式。一种是query传参，另外一种则是params传参。由于params传参刷新页面，会导致数据丢失。所以采用query传参方式比较多，但当使用query传递对象，数组时，刷新页面会报[object Object]，数据无法使用。 2、所遇问题： 首先打印下要传递的对象数据 这是要传递的参数，先正常传参 在详情页接受参数 控制台打印的数据，第一次可以接收到 f5刷新页面，控制台打印 单条数据可以无影响，对象无法获取，变为[object Object]。
vue 数组转对象 对象转数组（四种方案）
最新发布
xuelong的博客
10-20 3294
数组转对象 对象转数组
Vue3 利用 json 数据动态生成路由和实现组件懒加载
m0_46627730的博客
05-27 3045
前言： 目前都只是在学习，做项目顶多是为了比赛，所以一般不去考虑项目的可维护性，故就基本就不花力气去专研动态生成菜单，动态配置路由了，顶多是在动态引入组件上做下优化。但随着经验的增长，我渐渐觉得这样一直划水太不好了，恰逢想写个团队官网，想以后一直让师弟师妹维护，故不得不改变自己，这次就从利用 json 数据动态配置路由以及实现动态懒加载开始吧。 注释：因为目前缺少后台接口，故先在本地用json存储数据先。 json文件存储路由数据 特别说明1：因为这时 vue3，故错误地址重定向我用了： { "pat
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
Vue的路由对象
zyzhan
10-19 1766
1、路由对象含义 一个路由对象（route object）表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录（route records）。 路由对象是不可变的，每次成功的导航都会产生一个新的对象。 2、 路由对象的使用（慢慢熟悉） 在组件内，即this.$route; 在$route观察者回调内； router.match(location)的返回值; 导航守卫的参数： router.beforeEach((to, from, next
vue路由跳转(这里是以传对象的方式演示)
ting0712的博客
11-10 1721
1:router-link打开新窗口必须配合query,在当前页跳转query,params都可以 ,是否打开新窗口target="_blank" //传参 <router-link:to="{name:'recordPreview', params: {dataForm:JSON.stringify(dataForm)}}"target="_blank" >预览</router-link> //接收 this.dataForm= JSON.parse(this....
VueRouter之构建VueRouter对象以及new Vue涉及的处理
热门推荐
玉案轩窗的博客
07-19 1万+
前言 当程序加载执行完vue-router文件，就执行new VueRouter()动作以及new Vue()动作，本篇文章就是探究这两个过程对于路由具体的处理逻辑。 具体分析 new VueRouter() 在第一篇文章中的实例中，调用new VueRouter()来创建router对象，VueRouter()具体的处理逻辑如下： 从上面的处理逻辑中可以看出，new VueRout...
路由（vue-router）（一）
weixin_64037609的博客
11-26 1267
在vue中，组件的渲染只能通过以下两种方式一、组件的嵌套（前几篇组件的嵌套）二、路由的渲染vue中的路由：一个对应一个。
【Vue的路由】
橙子的博客
08-10 1560
routes,在路由表中包含多个route。
Vue的router详解
Litt_White的博客
08-20 4050
vue-router参数配置，vue-router的相对路径和绝对路径，带/和不带/的区别，vue-router路由的嵌套使用，vue-router的路由传参，keep-alive的使用，vue-router动态添加路由，删除路由，vue-router导航守卫的使用
Vue路由（vue-router）详细讲解指南
精选资讯文章
06-05 6173
酷的同时也会给我们带来一些问题，因为使用路由参数时，从/user/xianyu导航到/user/mengxiang，原来的组件实例会被复用，两个路由都渲染同个组件，比起销毁再创建，显示复用显得效率更高，带来的的只管问题就是生命周期钩子函数不会再被调用，也就是不会再被触发；就这样，我们的页面就可以进行路由跳转和切换了，路由的基本使用就完成了；重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；
VUE router对象
大脑袋瓜子
03-19 1664
1.this.$router.push() 描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。 2.this.$router.replace() 描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。 3.this.$router.go(n) 相对于当前页面向前或向...
VUE3 ---＞vue-router4 获取路由对象与参数
ClearloveYt的博客
08-27 1526
createWebHashHistory() 带 #获取路由对象 router useRouter。获取路由参数 route useRouter。history 模式使用。在vue3 组合式api中。1. 创建路由实例由。
vue3使用vue-router路由拆分
09-06
在Vue 3中，使用Vue Router进行路由拆分可以帮助你更好地组织和管理你的路由配置。以下是一些步骤来实现路由拆分： 1. 安装Vue Router：首先，确保你的项目中已经安装了Vue Router。可以通过以下命令进行安装： ``` npm install vue-router@next ``` 2. 创建路由模块：创建一个新的模块来定义和配置你的路由。可以创建一个名为`router.js`的文件，并在其中导入Vue和Vue Router： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const routes = [ // 定义你的路由配置 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 3. 定义路由配置：在路由模块中，通过`routes`数组来定义你的路由配置。每个路由对象应该包含一个`path`属性和一个`component`属性，分别指定路由的路径和对应的组件。 ```javascript import Home from './components/Home.vue'; import About from './components/About.vue'; const routes = [ { path: '/', component: Home, }, { path: '/about', component: About, }, // 更多路由配置... ]; ``` 4. 在主应用程序中使用路由：在你的主应用程序中，导入并使用创建的路由实例。你可以在`main.js`文件中完成这个步骤： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` 现在，你已经成功拆分了你的路由配置。你可以在每个组件中使用`<router-link>`和`<router-view>`来进行导航和渲染路由组件。 注意：以上只是一个简单的示例，你可以根据你的项目需求进行更复杂的路由配置和组织方式。不过，以上步骤应该可以帮助你开始使用Vue Router进行路由拆分。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值