vue2简单的路由切换

1：安装路由指定版本3

 

在 cmd 黑窗口输入：
vue create vue2_Routenpm install vue-router@3.6.5

2：再新建的项目下创建：

index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')},{path: '/about',name: 'About',component: () => import('@/views/About.vue')},{path: '/contact',name: 'Contact',component: () => import('@/views/Contact.vue')}]const router = new VueRouter({mode: 'history',routes})export default router

main,js:
 

import Vue from 'vue'
import App from './App.vue'
import router from './route/index'Vue.use(router)Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

About.vue:

<template ><div class="about"><h1>About</h1><p>This is the about page</p><router-link to="/">Go to Home</router-link></div>
</template>
<script>
export default {name: '',components: {},mixins: [],props: {},data() {return {}},computed: {},watch: {},mounted() {},methods: {}
};
</script>
<style  scoped>
.about {text-align: center;margin-top: 50px;font-size: 24px;color: #333;font-weight: bold;text-shadow: 1px 1px 1px #ccc;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px #ccc;   background-color: #f5f5f5;position: relative;z-index: 1;overflow: hidden;transition: all 0.3s ease-in-out;}
</style>

Contact.vue:

<template><div class="contact"><h1>Contact</h1><p>This is the contact page</p><router-link to="/">Go back</router-link></div>
</template>
<script>
export default {name: '',components: {},mixins: [],props: {},data() {return {}},computed: {},watch: {},mounted() {},methods: {}
};
</script>
<style  scoped>.contact {text-align: center;padding: 20px;background-color: #f2f2f2;border-radius: 5px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 0 10px rgba(0,0,0,0.1);h1 {margin-top: 0;}p {margin-bottom: 20px;font-size: 18px;line-height: 1.5;}}   
</style>

Home.vue:

<template><div class="home-page"><h1>Home Page</h1><p>Welcome to the Home Page</p></div>
</template>
<script>
export default {name: "",components: {},mixins: [],props: {},data() {return {};},computed: {},watch: {},mounted() {},methods: {},
};
</script>
<style  scoped>
.home-page {text-align: center;padding: 20px;background-color: #f5f5f5;border-radius: 5px;margin-top: 50px;margin-bottom: 50px;
}
h1 {font-size: 36px;margin-bottom: 20px;
}
p {font-size: 24px;margin-bottom: 20px;
}
</style>

App.vue:

<template><div id="app"><div class="links"><router-link to="/">去首页</router-link><router-link to="/Contact">去中心</router-link><router-link to="/About">去About</router-link></div><router-view></router-view></div>
</template>
<script>
export default {name: "App",components: {},mixins: [],props: {},data() {return {};},computed: {},watch: {},mounted() {},methods: {},
};
</script>
<style scoped>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.links {margin-bottom: 30px;
}
.links a {display: inline-block;margin: 0 15px;color: #2c3e50;text-decoration: none;
}
.links a:hover {color: #1abc9c;
}
.router-view {display: flex;justify-content: center;align-items: center;height: 100vh;}
</style>