如果在创建项目的时候没有选择vue的路由插件,这就需要手动安装了,安装命令如下:
npm install vue-router
# OR
npm install vue-router --save
安装完插件之后,需要在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)
})
修改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各个组件页面的切换了。
还有一步很重要,那就是创建路由守卫,这个步骤需要在项目的根目录下创建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