Vue路由知识点

Vue路由

1.初识路由

路由
	本质上是一种对应关系系
后端路由
	由服务器来实现资源的分发
	本质上就是URL与资源/数据之间的对应
前端路由
	依靠URL中hash值（#）来实现页面内容的切换
	本质上就是锚点与组件之间的对应

2.Vue-router

1.Vue-router工作原理
	1.Vue-router是由vue.js官方提供的一个路由管理器，前端路由器，可以实现前端界面内			容的切换
	2.单页面应用（SPA）：整个网站只有一个页面，即更新视图而不从新请求界面
	3.SPA推荐使用Vue-router来实现界面切换
	4.Vue-router提供两种模式
		1.hash模式：hash又叫锚点，#/login根据hash改变，实现界面内容的切换
		2.history模式：不会出现#，比较美观，   利用history.pushState()来完成URL的跳转而且无需重新加载界面
			const router = new VueRouter({            mode:'history',            routes:[...]        })
			Vue-router默认为hash模式，需要通过mode来改变模式
2.Vue-router的基本使用
	1.引入Vue-router.js
	2.定义路由链接和路由视图
		<div id="app">        <router-link to='/login' tag='span'>	前往登陆</router-link>        				<router-view></router-view></div>
		router-link是指路由链接，to代表链接地址，tag代表渲染的标签
		router-view是路由视图，用于显示路由链接对应的组件
	3.定义路由匹配规则
		var router = new VueRouter({            routes:[{                //配置路由匹配规则                path:"/login",     //监听哪个路由链接地址                component:login   //前边匹配成功显示值            }]     });
		var login = {            template:'<h1>登录组件</h1>'}
		在实例化VueRouter的时候传入routes，routes是路由数组，在这里只有一个路由
		匹配规则是一个对象，key是路由链接path，value是组件conponent
	4.注册路由
	•	var vm = new Vue({            el:'#app',            router:router               // 前边是选项，后边是对象   如果一样的话可以直接写成router });
	•	在实例化Vue的时候，通过选项router来注册路由
3.路由对象属性
	1.this.$router表示全局路由对象，就是通过router选项注册的VueRouter路由管理对象
	2.this.$route代表当前路由对象，而已获取当前路由相关信息

3.动态路由

o	1.什么是动态路由
		可以匹配带有不同参数的URL的路由规则。
		•	{path:/user/:id,component:user}
		•	:id表示用户id，但他是一个动态的值
o	2.query方式传参
		1.通过“?”传参
		2.传参
		•	<div id="app">        <router-link to='/user?id=10&name=admin' tag='span'>登陆</router-link>        <router-view></router-view></div>
		•	传参方法：?参数名1=参数值1&参数名2=参数值2
		3.定义路由
		•	var router = new VueRouter({            routes:[                {path:"/user",component:user}                 ]     });
		4.获取参数
		•	var user = {            template:'<h3>id:{{this.$route.query.id}} name:{{this.$route.query.name}}</h3>',            created(){                console.log(this.$route);            }}
		•	{{this.$route.query.参数名}}
o	3.params方式传参
		1.通过URL本身传递
		2.传参
		•	<div id="app">        <router-link to='/user/10/admin' tag='span'>登陆</router-link>        <router-view></router-view></div>
		•	传参方法：/参数值1/参数值2，只需要传值即可
		3.定义动态路由
		•	var router = new VueRouter({            routes:[                {                    path:"/user/:id/:name",                    component:user                }                 ]    });
		•	动态路由语法：参数名，以冒号开头就代表动态匹配
		•	这里的:id匹配到10，:name匹配到admin
		4.获取参数
		•	var user = {            template:'<h3>id:{{this.$route.params.id}} name:{{this.$route.params.name}}</h3>',            created(){                console.log(this.$route);            } }
		•	{{this.$route.params.参数名}}

4.嵌套路由

o	1.什么是嵌套路由
		界面中如果存在嵌套组件，那么就需要组件对应的路由就叫嵌套路由
		简而言之：嵌套路由就是路由里边嵌套它的子路由
o	2.定义嵌套路由
		通过在路由对象中定义children属性，定义嵌套的子路由
		var router = new VueRouter({            routes:[                {path:'/',redirect:'/about'},//重定向，默认开始值                {                    path:'/about',                    component:about,                    children:[//子路由                        {path:"detail",component:detail},                        {path:"government",component:government}                    ]                },                {path:'/contact',component:contact},            ]    });
o	3.使用嵌套路由
		<router-link to='/about/detail'>公司简介</router-link><router-link to='/about/government'>公司治理</router-link>
		子路由的URL是：父path/子path

5.命名路由

o	1.什么是命名路由
		如果路由path比较长，使用的时候比较麻烦，知识后可以给路由起个名字，用的时候通过名字使用
o	2.定义命名路由
		var router = new VueRouter({            routes:[                {path:"/user/:id",name:'user',component:user}                 ]    });
		在定义路由对象时，通过name来给路由器名字
o	3.使用命名路由
		<div id="app">        <router-link :to="{name:'user',params:{id:123}}" tag='span'>登陆</router-link>        <router-view></router-view></div> to前面加一个：，表示绑定，在to属性中，name表示组件名称，params用来传递id值 
		使用属性绑定：是因为to的值是一个js对象

6.命名视图

o	1.给视图起名字就是命名视图
o	2.在开发中想要使用多个同级视图时就是用命名视图
o	3.定义命名视图：通过name属性给router-view添加名字
o	4.路由规则使用命名视图：路由对象通过components来使用多个视图

7.编程式导航

o	1.router.push()
		1.push：可以实现url跳转
		2.params传参
o	2.router.replace()
o	3.router.go()