1. 技术文章
  2. vue路由

vue路由

由 久未见 提交于 2020-01-14 00:25:02

在这里插入图片描述

vue路由

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

vue-router安装

api:https://router.vuejs.org/zh/installation.html

路由的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<!-- 1.先加载vue包文件,然后在加载vue-router -->
	</head>
	<body>
		<div id="app">
			<!-- 6当在使用路由时,在路由前面加一个# -->
			<a href="#/login">登录</a>
			<a href="#/register">注册</a>
            
	 <!-- router-link 默认渲染为一个a 标签     tag属性可以是我们渲染router-link为任意一个元素
		虽然渲染成为了别的标签 但还是具备点击切换功能-->
			<!-- 在router-link 使用路由时不用加# -->
			<router-link to="/login" tag="span">登录</router-link>
			<router-link to="/register">注册</router-link>
            
            
			<!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->
			<!-- 所以： 我们可以把 router-view 认为是一个占位符 -->
			<router-view></router-view>
		</div>

		<!-- ---------------模板------------------------------------------ -->
		<template id="login">
			<div>登录路由</div>
		</template>
		<template id="register">
			<div>注册路由</div>
		</template>
		<!-- -------------------------------------------------------------- -->
		<script type="text/javascript">
			//2.创建组件模板,不注册为组件
			var login = Vue.extend({
				template: '#login'
			})
			var register = Vue.extend({
				template: '#register'
			})
			// ------------------------创建路由对象------------------------

			var routerobj = new VueRouter({
				//3配置路由匹配规则
				routes: [{
						path: '/',
						redirect: '/login'
					}, //路由重定向,当请求'/'时重定向到'/login'
					{
						path: '/login',
						component: login
					}, //component后面指向的是模板,不带引号
					{
						path: '/register',
						component: register
					}
				],
                
//激活高亮显示,现在我们就可以定义一个名为.myactive的样式,当路由激活时显示
//如果不设置linkActiveClass,它有一个默认的类(.router-link-active),我们也可以直接给这个类设置样式
				 linkActiveClass: 'myactive'
			});

			//----------------------------------------------------------
			var vm = new Vue({
				el: '#app',
				data: {

				},
				methods: {

				},
				//4.将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
				router: routerobj
			});
		</script>
	</body>
</html>

在路由规则中定义参数

第一种方式
  1. 在规则中定义参数：
{ path: '/register/:id', component: register }
  1. 在路由后面拼接数据
<div id="app">
    <!-- 通过params传递参数 -->
    <!-- 2在点击时传递如下格式的数据 -->
    <router-link to="/login/12/zs" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
  1. 通过 this.$route.params来获取路由中的参数：
var register = Vue.extend({
      template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
    });
第二种方式
<body>
	<div id="app">
		<!-- 如果在路由中使用查询字符串,给路由传递参数,则不需要修改路由得path属性 -->
		<!-- query传值:
		 1.给要跳转的路由后面拼接数据
		 <router-link to="/login?id=10" tag="span">登录</router-link>
		 -->
		<router-link to="/login?id=10" tag="span">登录</router-link>
		<router-link to="/register">注册</router-link>
		<router-view></router-view>
	</div>
	<template id="login">
		<!-- 3通过 $route.query就可以在页面中显示相对应的获取到的数据-->
		<div>登录路由{{$route.query}}</div>
	</template>
	<template id="register">
		<div>注册路由</div>
	</template>
	<script type="text/javascript">
		var login = Vue.extend({
			template: '#login',
			created() {//2在属性和方法初始化完毕后通过this.$route就可以获取到数据对象
				console.log(this.$route.query)//在组件生命周期函数中获取数据
			}
		})
		var register = Vue.extend({
			template: '#register'
		})

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

		var vm = new Vue({
			el: '#app',
			data: {

			},
			methods: {

			},
			router: routerobj
		});
	</script>
</body>

使用 children 属性实现路由嵌套

<body>
	<div id="app">
		<router-link to="/account">Account</router-link>

		<router-view></router-view>
	</div>

	<script>
		// 父路由中的组件
		const account = Vue.extend({
			template: `<div>
			这是account组件
			<router-link to="/account/login">login</router-link> | 
			<router-link to="/account/register">register</router-link>
			<router-view></router-view>
		  </div>`
		});

		// 子路由中的 login 组件
		const login = Vue.extend({
			template: '<div>登录组件</div>'
		});

		// 子路由中的 register 组件
		const register = Vue.extend({
			template: '<div>注册组件</div>'
		});

		// 路由实例
		var router = new VueRouter({
			routes: [
				{
					path: '/account',
					component: account,
					children: [ // 通过 children 数组属性，来实现路由的嵌套
						{
							path: 'login',
							component: login
						}, // 注意，子路由的开头位置，不要加 / 路径符
						{
							path: 'register',
							component: register
						}
					]
				}
			]
		});

		// 创建 Vue 实例，得到 ViewModel
		var vm = new Vue({
			el: '#app',
			data: {},
			methods: {},
			components: {
				account
			},
			router: router
		});
	</script>
</body>

命名视图实现经典布局

<body>
    <div id="app">
        <router-view></router-view>
        <router-view name="left"></router-view>
        <router-view name="right"></router-view>
        <router-view name="bottom"></router-view>
    </div>
    <script type="text/javascript">
        var header = Vue.component('header', {
            template: '<div>这是头部内容</div>'
        });

        var left = {
            template: '<div>这是左边内容</div>'
        }
        var right = {
            template: '<div>这是右边内容</div>'
        }
        var footer = {
            template: '<div>这是下边内容</div>'
        }
        var routerobj = new VueRouter({
            routes: [{
                path: '/',
                components: { //注意:components是带s的

                    //对象的key指向router-view的name属性
                    //对象的value指向的是模板
                    default: header,
                    left: left,
                    right: right,
                    bottom: footer
                }
            }]
        });
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            router: routerobj
        });
    </script>
</body>
<!--模板显示后就可以通过添加class属性为其设置样式.进行布局-->

watch属性的使用

1.监听data中属性的改变：

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'jack',
            lastName: 'chen',
            fullName: 'jack - chen'
        },
        methods: {},
        //watch监视data中数据的变化  触发相应的处理函数
        //函数名就是data中的属性名称:处理函数
        watch: {
            'firstName': function(newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据,两个形参是可选的
                this.fullName = newVal + ' - ' + this.lastName;
            },
            'lastName': function(newVal, oldVal) {
                this.fullName = this.firstName + ' - ' + newVal;
            }
        }
    })
</script>

2.监听路由对象的改变：

<script type="text/javascript">
	var login = Vue.extend({
		template: '#login'
	})
	var register = Vue.extend({
		template: '#register'
	})

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

	var vm = new Vue({
		el: '#app',
		data: {

		},
		methods: {

		},
		router: routerobj,
		watch: {
			'$route.path': function(newval, oldval) {

				console.log(newval) //可以进一步对vue路由进行设置;
			}
		}
	});
</script>
标签
路由
vue路由
vue
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!