Vue router使用

1.使用npm安装路由（我这里使用的是vue2，对应的路由是3版本）

npm i vue-router@3

 2.创建router文件下index.js文件，存放路由表

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
		{
		    path:'/',
			redirect:"/Login",
		    component:() =>import ("../page/login")
		},
        {
            path:'/Login',
			name:'Login',
            component:() =>import ("../page/login")
        }
    ]
})

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:router
}).$mount('#app')

4.在page下创建login.vue页面

<template>
	<div>Login psge
	<button @click="tomain">tomain</button>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
			  
			}
		},
		methods:{
			tomain(){
				this.$router.push('/Main')
			}
		}
	}
</script>

创建main.vue页面，当要切换页面的时候使用this.$router.push('路由表中的path')

<template>
	<div>Main page</div>
</template>

<script>
</script>

<style>
</style>

5.在app.js里面使用路由导航，使用路由导航后默认页面为路由表中的第一个页面

<template>
  <router-view></router-view>
</template>

<script>

</script>

<style>

</style>

6.运行项目

点击按钮后

 

 

完成！