vue中路由的嵌套、组件的封装与使用

一：路由的嵌套

路由是vue的核心。

使用npm install --save vue-router中来使用。

--save vue-router可以在package.json中写入到对应的依赖

在router文件夹下index.js将vue-router导入，并且声明要使用vue-router;

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

在main.js文件中引入router组件，然后将路由在VUE项目中挂载

然后再router文件夹下的index.js文件下下入页面路由，如登陆路由、用户列表等等

在页面中可以通过以下方式使用路由

1：通过router-link标签的方式

<router-link to="home">Home</router-link>

2：通过router的push的方式

self.$router.push({path: '/manage'});

二：组件的封装与使用

在components文件下新建一个headTop页面

然后在home页面中引入组件

1：引入组件

import headTop from '../../components/headTop'

2：申明组件

components:{
  headTop
}

3：使用组件

<head-top></head-top>

vue前端页面效果如下：