路由

路由就是一种对应关系

路由分为前端路由和后端路由

后端路由概念:根据不同用户的URL请求,返回不同的内容   

             本质:URL请求地址与服务器资源之间的对应关系

前端路由概念:根据不同的用户事件,显示不同的页面内容

　　　   本质:用户事件与事件处理函数之间的对应关系

 

前端路由的原理:

当前端的hash地址发生变化的时候,会触发onhashchange事件

window.onhashchange = function(){
//通过location.hash获取最新的hash值
console.log(location.hash)
}

在onhashchange事件的处理函数中,根据当前的hash地址来进行判断并展示当前hash地址对应的页面内容

 

前端路由会使用VueRouter组件来进行

VueRouter 路由管理器  用于SPA应用程序开发

SPA的实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化,但是hash的变化不会触发新的URL请求)   核心的技术就是前端路由

 

 

配置路由规则并创建路由实例

注  意: redirect:"/user"     -----默认的hash地址

//创建路由实例对象
var router = new VueRouter({

//router 是路由规则数组
routes:{
//每个路由规则都是一个匹配对象,其中至少包含 path 和component 两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展示的组件
{path:"/user",component:User'},
{path:"/oopp",component:oopp'},
}

})

基本使用步骤:

 

动态路由匹配方法:

 

//动态路径参数,以冒号开头
{path:"/user/:id",component:User}

 

路由组件传递参数

props的值为布尔类型

 

const router = new VueRouter({
routes:[
//如果props被设置为 true ,route.param 将会被设置为组件属性 
{path:"/user/:id",component:User,props:true}

]

})
const User = {
  props:["id"],       //使用props接收路由参数
template:"<div>用户ID:{{id}}</div>"     //使用路由参数 
}