vue路由的基本使用

1.安装路由

npm i vue-router

　　

2.配置路由文件

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露router
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

3.main.js文件

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'//引入路由插件
import router from '@/router'//引入路由配置文件

Vue.config.productionTip = false

Vue.use(VueRouter)//使用路由插件

new Vue({
  render: h => h(App),
  router//路由配置文件
}).$mount('#app')

4.vue文件使用路由

  <!-- 路由链接 -->

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item " active-class="active" to="/home">Home</router-link>


//页面使用路由
<router-view></router-view>