实现简易的前端路由

 

• 基于URL的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

 

//监听  window  的  onhashchange  事件，根据获取到的最新的 hash 值，切换要显示的组建的名称

window.onhashchange = function() {

  //  通过 location.hash 获取到最新的 hash 值

}

 

模拟路由---切换导航栏：

<!-切换组件的超链接-->

<a href="#/zhuye">主页</a>

<a href="#/keji">科技</a>

<a href="#/caijing">财经</a>

<a href="#/yule">娱乐</a>

 

<!-根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置-->

<!-可以把 component 标签当作是【组件的占位符】-->

<component  :is="comName"></component>

 

//定义需要切换的4个组件

const zhuye = {

　　template:"<h1>主页信息</h1>"

}

const keji = {

　　template:"<h1>科技信息</h1>"

}

const caijing = {

　　template:"<h1>财经信息</h1>"

}

const yule = {

　　template:"<h1>娱乐信息</h1>"

}

 

//vue实力对象中

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

}}