目录

 

前言

一、介绍、安装

1.定义

2.安装

1：在src根目录创建router目录，在目录中创建index.js，代码如下：

2：main.js 中进行挂载

二、基本使用（代码后赋）

展示效果

代码（看对应的代码段）

app.vue代码，此代码含有样式

三个路由组件的代码

router

三、嵌套路由

1.布局逻辑

2.效果展示

 3.代码

about

 两个路由组件

四、注意

---

前言

想要学习完整内容请关注主页的专栏————>Vue学习

本次的代码段是结合体，被我分开发文，我以在看代码段时，已经截图展示，所看部分

一、介绍、安装

1.定义

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

路由：route        一组key-v的对应关系(路径的改变对应的组件进行切换)

路由器：router    多个路由需要路由器管理

为了实现单页面应用

2.安装

npm i vue-router@3   安装3版本

如果使用 vue ui 就没有以下的操作，因为在创建项目的时候已经配置好了

1：在src根目录创建router目录，在目录中创建index.js，代码如下：

import Vue from 'vue';
 
//导入vue-router
 
import VueRouter from 'vue-router'
 
//应用插件
 
Vue.use(VueRouter)
 
//创建router规则对象
 
const routes = [
 
]
 
//创建router
 
const router = new VueRouter({
 
routes
 
})
 
//导出router
 
export default router

2：main.js 中进行挂载

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

二、基本使用（代码后赋）

以下例子展现路由的基本使用

css样式已经写好了，直接实现路由效果

展示效果

首先学习的效果

 

 

代码（看对应的代码段）

app.vue代码，此代码含有样式

 
<script>
 
 
export default {
name:'App',
methods: {
 back(){
		this.$router.back()
	}
},
 
 
 
components:{
   
},
}
script>
 
<style>
.c{
	clear: both;
}
*{
		margin: 0px;
		padding: 0px;
	}
	li{
		list-style: none;
	}
	a{text-decoration: none;}
	.main{width: 800px;margin: auto;}
	.header{box-sizing: border-box;padding: 20px;border:1px solid #666;}
	.left{
		height: 500px;
		border: 1px solid #666;
		width: 200px;
		float: left;
	}
	.left li{
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-bottom: 1px solid #666;
		width: 100%;
	}
	.left li a{
		color: #333;display: block;
	}
	.left li a.hover{
		background: blue;color: #fff;
	}
 
	.right{float: right;
	border:1px solid #61DAFB;
	width: 590px;
	height: 500px;
	}
	.nav li{
		float: left;
	
	}
	.nav li a{
		width: 150px;
		text-align: center;
		height: 40px;line-height: 40px;
		text-align: center;
		border:1px solid #000000;
		display: block;
	}
	.nav li a.hover{
	background: #0000FF;color: #fff;
	}
style>

三个路由组件的代码

about

 
<script>
export default {
    name: 'About',
 
    data() {
        return {
            
        };
    },
 
    mounted() {
        
    },
 
    methods: {
        
    },
};
script>
 
<style scoped>
 
style>

ContaactUs 

 
<script>
export default {
    name: 'ContaactUs',
 
    data() {
        return {
            
        };
    },
 
    mounted() {
        
    },
 
    methods: {
        
    },
};
script>
 
<style scoped>
 
style>

persons