VueRouter 路由使用，路由守卫

一 安装对应版本的VueRouter

二在main.js做相关操作   

import Vue from 'vue'
import App from './App.vue'
//引入路由配置文件
import router from './router/index.js'
Vue.config.productionTip = false
//引入实例对象
new Vue({
	el:"#app",
  render: h => h(App),
  router
})

三在index.js 配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import AllThings from '../components/AllThings'
import Hot from '../components/Hot'
import Sport from '../components/Sport'
Vue.use(VueRouter)
const routes=[
	{
		path:'/AllThings',
		component:AllThings,
	},{
		path:'/Hot',
		component:Hot,
	},{
		path:'/sport',
		component:Sport,
	}
]
export default  new VueRouter({
	routes
})

四在app页面使用

<template>
  <div id="app">
	 
	  <router-link to="/AllThings"> <span class="layui-btn">综合</span></router-link>
      <router-link to="/Hot"> <span class="layui-btn">热门</span></router-link>
	  <router-link to="/sport"> <span class="layui-btn">体育</span></router-link>
  <div class="layui-container">
	    <router-view></router-view>
  </div>
  </div>
</template>

　　

 路由守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import AllThings from '../components/AllThings'
import Hot from '../components/Hot'
import Sport from '../components/Sport'
Vue.use(VueRouter)
const routes = [
	{
		path: '/AllThings',
		component: AllThings,
		meta: {
			isHotShow: true
		}
	}, {
		path: '/Hot',
		component: Hot,
		meta: {
			isHotShow: true
		},
		name: "Hot",
	}, {
		path: '/sport',
		component: Sport,
		meta: {
			isHotShow: false,
			isAuth: true
		}
	}, {
		path: '',
		redirect: '/AllThings',
		meta: {
			isHotShow: true   //判断是否隐藏组件
		}
	}
]
// 先存起来在 再暴露
const router= new VueRouter({
	routes
})
// 路由守卫
router.beforeEach((to,from,next)=>{
 console.log(to,from,next)
 if(to.meta.isAuth===true){
	if(localStorage.getItem("name")==="laoli"){
		next()
	}else{
		alert("不符合权限")
	}
 }else{
	next()
 }

})

export default router