配置并使用路由

1.打开终端,输入npm install --save vue-router   

//使用vue2要使用路由版本3  npm install --save vue-router@3

2. 在components中创建页面

3.新建router文件夹，新建index.js文件配置：

import Vue from 'vue'

//专门创建整个项目的路由
import VueRouter from 'vue-router'

import Login from '../components/Login'
import Home from '../components/Home'
Vue.use(VueRouter)

//创建并暴露一个路由器
const route  = new VueRouter({
	routes: [
		// { path: '/', redirect:'/login'},//自动跳转到/login
		{ path: '/login', component: Login},
		{ path: '/home', component: Home},
	]
})
export default route

4.在入口main.js中引入

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import VueRouter from 'vue-router'
//引入router

import reuter from "./router/index.js"
//引用router

import axios from "axios"
axios.defaults.baseURL = 'http://xssq:9000'
Vue.prototype.$http = axios

Vue.use(ElementUI);

Vue.use(VueRouter);//使用router

//导入全局样式
import './assets/css/glo.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

5.在APP中使用

<template>
  <div id="app">
	  <div><!-- Vue中借助router-link实现路由的切换 -->
	  <Login/>
		   <router-link to="/login" active-class="active">Login</router-link>
		  <br>
		  <router-link to="/home" active-class="active">Home</router-link> 
		  
	  </div>
	  <div>
	  	  <!-- Vue借助router-view实现路由的展示 -->
	  	  <router-view></router-view>
	  </div>
  </div>
  
</template>

<script>
import Login from './components/Login.vue'
import Home from './components/Home.vue'

export default {
  name: 'app',
  components: {
    Login,
	Home
  },
  
}
</script>

<style>

</style>

6、效果

 点击Login后显示Login组件中的页面

 

 且切换到login路由

 点击Home同上