1、安装插件

如果在创建项目的时候没有选择vue的路由插件，这就需要手动安装了，安装命令如下：

npm install vue-router

# OR
npm install vue-router --save

2、修改main.js文件

安装完插件之后，需要在main.js中引入vue-router，具体代码如下：

// file:main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import App from './App.vue'
//--1
import router from './router'

//挂在到vue#app
Vue.prototype.$http = axios
// 配置请求的根路径
axios.defaults.baseURL = 'http://192.168.48.1:9001/'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  //--2
  router,
  render: h => h(App)
})

3、在组件中增加路由占位符

修改App.vue文件如下：

<!-- file:App.vue -->
<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

加上上面的路由占位符后，就可以实现vue各个组件页面的切换了。

4、增加守卫路由

还有一步很重要，那就是创建路由守卫，这个步骤需要在项目的根目录下创建router目录，然后在该目录创建index.js文件，具体代码如下：

//file:router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Main from '../components/Main.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
	{
	  path: '/Login',
	  name: 'Login',
	  component: Login
	},
	{
	  path: '/Main',
	  name: 'Main',
	  component: Main
	},
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next)=>{
	console.log("to="+to.path)
	console.log("from="+from.path)
	// to 要访问的路径
	// from 从哪个页面而来
	// next 是一个函数,表示放行
	// next() 放行, next('/Login')强制跳转
	if(to.path === '/Login') return next()
	// 获取token
	let userinfo = window.sessionStorage.getItem("userinfo")
	if(!userinfo) {
		return next({path:'/Login'})
	}
	console.log("userinfo1="+userinfo)
	let uu = JSON.parse(userinfo)
	//let uu = JSON.stringify(userinfo)
	console.log("username="+uu.name)
	next()
})

export default router