Vue-router路由

最新推荐文章于 2023-12-20 15:32:24 发布

广东话的蛇皇

最新推荐文章于 2023-12-20 15:32:24 发布

阅读量230

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104861550

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

Vue-router路由

后端路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都会赢服务器上对应的资源

前端路由

对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现

安装

到资源传送门下载然后直接在Vue.js后引用

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

另一种方法是npm install vue-router
然后

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

基本使用

创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数VueRouter
在new路由对象的时候，可以为构造函数，传递一个配置对象，这个配置对象中的routes表示【路由匹配法则】，每个路由规则都是一个对象，这个规则对象，身上，有两个必须的属性：

path，表示监听哪个路由链接地址
component表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
注意：component的属性值必须是一个组建的模板对象，不能是组建的引用名称

最后要记得把路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后用<router-view></router-view>展示对应的组件
用a标签进行跳转的时候要记得加#

<!DOCTYPE html>
<html lang="en">
<head>  
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, inital-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>
	<div id="app">
		<a href="#/login">登录</a>
		<a href="#/register">注册</a>
		<router-view></router-view>
	</div>
	<script>
		var login = {
			template: '<h1>登录组件</h1>'
		}
		var register = {
			template: '<h1>注册组件</h1>'
		}
		var routerObj = new VueRouter({
			routes: [
				{ path: '/login', component: login },
				{ path: '/register', component: register }
			]
		})

		var vm = new Vue({
			el:'#app',
			data: {},
			methods: {},
			router: routerObj
		});
	</script>
</body>
</html>

`router-link`

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

redirect重定向设置默认路由

routes: [
				{ path: '/', redirect: '/login' },
				{ path: '/login', component: login },
				{ path: '/register', component: register }
			]

实现路由样式

使用默认样式`.router-link-active`

<style>
.router-link-active {
 //书写css样式
}
</style>

使用自定义样式

var routerObj = new VueRouter({
			routes: [
				{ path: '/login', component: login },
				{ path: '/register', component: register }
			],
			linkActiveClass: 'myactive'
		})

加入动画

	<style type="text/css">
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(100px);
		}

		.v-enter-active,
		.v-leave-active{
			transition: all 0.6s ease;
		}
	</style>

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

使用query方式传递参数

<router-link to="/login?id=1&name=jack" tag="span">登录</router-link>

template: '<h1>ID:{{$route.query.id}} {{ $route.query.name }}登录</h1>'

使用params方式传递参数

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

template: '<h1>ID:{{$route.params.id}} {{ $route.params.name }}登录</h1>'

使用children属性实现路由嵌套

使用children属性实现子路由时，path前面不能带/，否则会以根路径开始请求

var routerObj = new VueRouter({
			routes: [
				{
					path: '/account',
					component: account,
					children:[
						{ path: 'login', component: login },
						{ path: 'register', component: register }
					]	
				}
			]
		})

使用命名实现布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>  
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, inital-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
		}
		.header{
			background: orange;
			height: 80px;
		}
		h1{
			margin: 0;
			padding: 0;
		}
		.container{
			display: flex;
			height: 600px;
			font-size: 16px;
		}
		.left{
			background-color: lightgreen;
			flex: 2;
		}
		.main{
			background-color: lightpink;
			flex: 8;
		}
	</style>
</head>
<body>
	<div id="app">
		<router-view></router-view>
		<div class="container">
			<router-view name="left"></router-view>
			<router-view name="main"></router-view>
		</div>
	</div>
	<script>
		var header = {
			template: '<h1 class="header">Header</h1>'
		}
		var leftBox = {
			template: '<h1 class="left">Left</h1>'
		}
		var mainBox = {
			template: '<h1 class="main">main</h1>'
		}
		var routerObj = new VueRouter({
			routes: [
				{
					path: '/',
					components: {
						'default': header,
						'left': leftBox,
						'main': mainBox
					}
					
				}
			]
		})

		var vm = new Vue({
			el:'#app',
			data: {},
			methods: {},
			router: routerObj
		});
	</script>
</body>
</html>

watch()监听路由变化

var vm = new Vue({
			el:'#app',
			data: {},
			methods: {},
			watch: {//监视data中指定数据的变化
			'$route.path': function (newVal, oldVal) {
				if(newVal === '/login'){}
				}
			}
		});

广东话的蛇皇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router路由

Vue-router路由后端路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都会赢服务器上对应的资源前端路由对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现安装到资源传送门下载然后直接在Vue.js后引用<scri...
复制链接

扫一扫