vue.js学习笔记十五 —— 路由的基本认识

最新推荐文章于 2022-09-01 17:01:01 发布

武汉小喽啰

最新推荐文章于 2022-09-01 17:01:01 发布

阅读量260

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/94412141

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. 什么是路由

1.1 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
1.2 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；前端hash只是适合在页面间跳转
例如：
http://www.badu.com/#/login 不会刷新页面
1.3.在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

2. 安装vue-router的两种方式

2.1 下载安装

2.2 VPM安装

3. router的基本使用

这里我们使用导入router包的方式来使用vue的路由功能。

当导入vue-router包之后，在Windows全局对象中，就有了一个路由的构造函数，叫做VueRouter。

3.1 创建一个路由对象

var routerObj = new VueRouter({

routers:[

// 路由规则

{ path:'/login' ，component:login}

]

});

参数解释：

1. 在new一个路由对象的时候，可以为构造函数传递一个配置对象。

2. 对象中的routers，是一个数组，表示路由匹配规则

3. 每个路由规则又都是一个对象，这个规则对象身上有两个必须的属性

3.1 path：表示监听哪个路由连接端口

3.2 component：表示，如果路由是前面匹配到的path，则展示component属性对应的那个组件,component后面跟的是组件模板对象。注意，不是组件

3.2 将路由对象注册到vm实例上

在vm对象中，与methods平级的地方定义 router：路由对象

例如：router:routerObj

用来监听URL地址的变化，然后展示对应的组件

3.3 vue-router的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.css"></link>
    <!-- 1. 安装 vue-router 路由模块 -->
  	<script src="./lib/vue-router-3.0.1.js"></script>
</head>
	<body>
		<div id="app">
			<a href="#/login">登录</a>
			<a href="#/register">注册</a>
			<router-view></router-view>
		</div>
	</body>
	<script>
			// 定义login组件模板对象
			var login = {
				template:'<h1>登录组件</h1>'
			};
			var register = {
				template:'<h1>注册组件</h1>'
			};
			var routerObj = new VueRouter({
				routes:[
					{path:'/login',component:login},
					{path:'/register',component:register}
				]
			});
			// 创建Vue实例，得到viemodel
			var vm = new Vue({
				el:'#app' ,
				data:{
				
				},
				methods:{
				},
				router:routerObj
			});
		</script>
</html>

注意：vue-router是vue提供的一个占位符，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去

3.4 router-link的使用

vue-router可以实现路由的功能，但是我们每次都需要在连接前面加上“ # ” ，使用起来也很不变，vue官方给我们提供了另一个路由器router-lnk。

3.4.1 router-link默认渲染为一个a标签，属性to为连接地址

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

3.4.2 修改router-link的默认渲染行为用tag属性

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

4. 路由重定向的使用

两种重定向方式：

1. 方式一：让根路径路由到默认路径

{path:'/',component:login}

注意：该方式不推荐使用，因为，地址栏URL会产生迷惑性

2. 方式二：使用redirect重定向

{ path:'/',redirect:'/login' }

5. 为选中路由设置特殊样式

两种方式：

1. 直接修改类router-link-active的样式

2. 修改 router-link 的默认样式类。在构造函数中加一个属性linkActiveClass并制定自定义的类

var routerObj = new VueRouter({
      // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
      routes: [ // 路由匹配规则 
        { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

6. 为路由切换动画

我们路由切换是通过<router-view>来实现的，所以动画也是加在上面

// 样式
<style>
  		.v-enter,
	    .v-leave-to {
	      opacity: 0;
	      transform: translateX(140px);
	    }
	
	    .v-enter-active,
	    .v-leave-active {
	      transition: all 0.5s ease;
	    }
  	</style>

<transition mode="out-in">
      <router-view></router-view>
</transition>

武汉小喽啰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习笔记十五 —— 路由的基本认识

1.什么是路由1.1 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；1.2 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；前端hash只是适合在页面间跳转例如：http:/...
复制链接

扫一扫