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

逃离我推掉我的手 2021-12-09 00:05 388阅读 0赞

一：路由的嵌套

路由是vue的核心。

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 2][]

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

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

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

2：通过router的push的方式

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

二：组件的封装与使用

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 3][]

然后在home页面中引入组件

> 1：引入组件
> 
>     import headTop from '../../components/headTop'
> 
> 2：申明组件
> 
>     components:{
>       headTop
>     }
> 
> 3：使用组件
> 
>     <head-top></head-top>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 4][]

vue前端页面效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70]: /images/20211209/5babe6f5f02b4280880a3516a5785743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 1]: /images/20211209/bc790109229c4410b7fa5e006161c6fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 2]: /images/20211209/3d3d3b9cd08049f0b514a2808fb8230c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 3]: /images/20211209/03217c9971a949be9930996562ee73bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 4]: /images/20211209/b312e60de4bd4f898fb2d91b31135134.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDY5MDU1_size_16_color_FFFFFF_t_70 5]: /images/20211209/c4f52e184edc4f888c3f0a235c625beb.png