如图:
步骤:
1、新建文件夹
在 src 下:新建 router 文件夹,再在 router 下 新建 index.js
在 components 文件夹下,创建组建 About.vue Home.vue
2、安装 router 插件:
控制台输入 npm i vue-router@3,在 package.json 文件夹中查看是否安装成功
npm i vue-router@3
3、index.js 创建路由
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
Vue.use(VueRouter)
// 创建路由
export default new VueRouter({
routes:[
{
path:'/About',
component:About
},
{
path:'/Home',
component:Home
}
]
})
4、About.vue Home.vue 代码
<template>
<h1>这是 About 页面</h1>
</template>
<script>
import About from '@/components/About.vue';
export default {
name:About,
}
</script>
<style>
</style>
<template>
<h1>这是 Home 页面</h1>
</template>
<script>
import Home from '@/components/Home.vue';
export default {
name:Home,
}
</script>
<style>
</style>
5、main.js
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from './router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 注意:router是关键
router,
}).$mount('#app')
6、App.vue
<div class="left">
<!-- router-link 是 router 的固定写法,等同于 a 标签,在页面解析时,会被自动转译成 a 标签 -->
<!-- to="About" 告诉浏览器,当点击 About 文本内容时,获取 About 组件内容 -->
<!-- active-class="active" 控制背景色,当用户点击 About 文本时,Home 当中的 active-class="active" 会被移除 -->
<!-- 注意:在该切换效果中,被移除的项 是确实从后台中被删除的,即该路由切换实际是项目反复被删除和添加的过程 -->
<router-link active-class="active" to="About">About</router-link>
<router-link active-class="active" to="Home">Home</router-link>
</div>
<div class="right">
<!-- 视图占位,用来展示 About Home 的文本内容 -->
<router-view></router-view>
</div>
<template>
<div class="w">
<div class="left">
<!-- router-link 是 router 的固定写法,等同于 a 标签,在页面解析时,会被自动转译成 a 标签 -->
<!-- to="About" 告诉浏览器,当点击 About 文本内容时,获取 About 组件内容 -->
<!-- active-class="active" 控制背景色,当用户点击 About 文本时,Home 当中的 active-class="active" 会被移除 -->
<!-- 注意:在该切换效果中,被移除的项 是确实从后台中被删除的,即该路由切换实际是项目反复被删除和添加的过程 -->
<router-link active-class="active" to="About">About</router-link>
<router-link active-class="active" to="Home">Home</router-link>
</div>
<div class="right">
<!-- 视图占位,用来展示 About Home 的文本内容 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.w{
width: 500px;
height: 300px;
background-color: #eee;
border: 1px solid #000;
box-sizing: border-box;
}
a{
display: block;
text-decoration: none;
color: #000;
}
a:first-child{
margin-top: 100px;
margin-bottom: 20px;
}
.active{
background-color: blue;
}
.left {
float: left;
width: 20%;
height: 300px;
border: 1px solid #000;
box-sizing: border-box;
text-align: center;
}
.right {
width: 80%;
height: 300px;
text-align: center;
margin-top: 120px;
margin-left: 100px;
}
</style>
作者是前端初学者,谨在此记录学习过程,如有错误还请各位大佬不吝赐教指出~~~谢谢