Vue的前端路由

前端路由与后端路由：
后端路由：根据不同的请求地址响应不同的内容
Vue前端路由：通过改变URL的hash值，根据hash的变化控制组件的切换

前端路由用法：点击a连接就会改变hash值，通过监听不同的哈希值来响应不同的内容

//监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件名称
		window.onhashchange = function(){
			//通过location.hash获取到最新的hash值
		}

简易路由案例：类似原生JavaScript的单击导航栏，在Vue中用组件代替不同模块的内容
原理：每个a连接点击时都会改变hash值，hash值就是href属性，拿到不同的hash值显示对应的内容

代码：

<!--被vue实例控制的div区域-->
	<div id="app">
		<!--切换组件的超链接-->
		<a href="#/zhuye">主页</a>
		<a href="#/keji">科技</a>
		<a href="#/caijing">财经</a>
		<a href="#/yule">娱乐</a>
		<!--根据 :is属性指定的组件名称，
		把对应的组件渲染到component标签所在位置-->
		<!--可以把component标签当做是【组件的占位符】-->
		<component :is="comName"></component>
	</div>
	<script type="text/javascript">
		//主页组件
		const zhuye = {
			template:'<h1>主页信息</h1>'
		}
		//科技组件
		const keji = {
			template:'<h1>科技信息</h1>'
		}
		//财经组件
		const caijing = {
			template:'<h1>财经信息</h1>'
		}
		const yule = {
			template:'<h1>娱乐信息</h1>'
		}
		
		const vm = new Vue({
			el:'#app',
			data:{
				comName:'zhuye',
			},
			components:{
				zhuye,
				keji,
				caijing,
				yule
			}
		})
		//监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件名称
		window.onhashchange = function(){
			//通过location.hash获取到最新的hash值
			console.log(location.hash);
			switch(location.hash.slice(1)){
				case '/zhuye':vm.comName='zhuye'
				break;
				case '/keji':vm.comName='keji'
				break;
				case '/caijing':vm.comName='caijing'
				break;
				case '/yule':vm.comName='yule'
				break;
			}
		}
	</script>

效果图：

Vue Router的基本使用：效果也是类似上个案例所提到的简易路由，只不过vue router把功能封装的更加完善
官网：https://router.vuejs.org/zh/installation.html
使用步骤：
1.引入相关文件
2.添加路由链接
3.添加路由填充位
4.定义路由组件
5.配置路由规则并创建路由实例
6.把路由挂载到Vue根实例中

1.引入相关文件：先引入Vue文件，再导入Vuerouter文件

2.添加路由链接
router-link是vue中提供的标签,默认会被渲染为a标签
router-link的to属性默认会被渲染为href属性
router-link的to默认值为#开头的hash地址

3.添加路由填充位/路由占位符
将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置

4.定义路由组件

5.配置路由规则并创建路由实例对象

//创建路由实例对象
	var router = new VueRouter({
		//routers是路由规则数组
		routes:[
			//每个路由规则都是一个配置对象，其中至少包含path和component属性
			//path表示当前路由规则匹配的hash地址
			//component表示当前路由规则对应要展示的组件
			{path:'/user',component:User},
			{path:'/register',component:Register}
		]
	})

6.把路由挂载到vue根实例中

const vm = new Vue({
			el:'#app',
			//为了能够让路由规则生效，必须把路由对象挂载到vue对象中
			//router:router
			router
		})

完整代码：

	<div id="app">
		<router-link to='/user'>666</router-link>
		<router-link to='/register'>777</router-link>
		<router-view></router-view>
	</div>
	
	<script type="text/javascript">
		const User = {
			template:'<h1>User</h1>'
		}
		const Register = {
			template:'<h1>Register</h1>'
		}
		//5.配置路由规则并创建路由实例对象
		//创建路由实例对象
		var router = new VueRouter({
			//routers是路由规则数组
			routes:[
				//每个路由规则都是一个配置对象，其中至少包含path和component属性
				//path表示当前路由规则匹配的hash地址
				//component表示当前路由规则对应要展示的组件
				{path:'/user',component:User},
				{path:'/register',component:Register}
			]
		})
		
		//6.把路由挂载到vue根实例中
		const vm = new Vue({
			el:'#app',
			//为了能够让路由规则生效，必须把路由对象挂载到vue对象中
			//router:router
			router
		})
	</script>

效果图：

网页端代码：

路由重定向：用户在访问路径a时，强制跳转到路径b
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

var router = new VueRouter({
			routes:[
				//当用户访问/路径时会自动重定向到User路径
				{path:'/',redirect:'/user'},
				{path:'/user',component:User},
				{path:'/register',component:Register}
			]
		})

vue-router嵌套路由：
父级路由当中显示的内容包含子级路由：在父级路由的template组件当中添加子级路由即可，并且在父级路由规则当中添加子路由规则

动态路由匹配的基本用法：通过动态路由参数的模式进行路由匹配，用组件的prop属性来传递参数

当props的值为布尔类型：

var router = new VueRouter({
			routes:[
				//如果prop被设置为true，route.params将会被设置为组件属性
				{path:'/user/:id',component:User,props:true},
			]
		})
		
		const User = {
			props:['id'],//使用props接收路由参数
			template:'<div>用户ID{{id}}</div>'
		}

当props的值为对象类型：

var router = new VueRouter({
			routes:[
				//如果prop被设置为对象，就能传递json参数,但是在path后不能加参数了
				{path:'/user',component:User,props:{ uname : 'lisi', age:12}},
			]
		})
		
		const User = {
			props:['uname','age'],//使用props接收路由参数
			template:'<div>用户信息{{uname +'----'+age}}</div>'
		}

当props的值为函数类型：

var router = new VueRouter({
	routes:[
		{path:'/user/:id',component:User,props:route => { uname : 'lisi', age:12,id:route.params.id}},
	]
})

const User = {
	props:['uname','age','id'],//使用props接收路由参数
	template:'<div>{{uname+'---'+age+'----'+id}}</div>'
}

命名路由的配置规则：

//为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”
		var router = new VueRouter({
			routes:[
				{
				path:'/user/:id',
				 name:'user',
				 component:User
				}
			]
		})
		<router-link :to="{ name:'user',params:{ id:123 }}">User</router-link>,
		router.push({name:'user'},params:{id:123})
		

vue-router:编程式导航（通过JavaScript实现跳转页面）

this.$router.push('hash地址');//根据hash地址跳转到对应的路由
this.$router.go(n);//根据n的正负值以及大小来跳转到前进或者后退的页面