Vue入门 vue-router路由管理器--3
Vue入门 vue-router路由管理器–3
官网地址: https://router.vuejs.org/zh/installation.html
第一步创建vue项目可前往Vue入门 IDEA创建vue项目并安装UI框架ElementUI–1
一、基本路由
二、动态路由
三、嵌套路由
一、基本路由
-
创建需要切换的组件a.vue与组件b.vue。
a.vue代码如下：
b.vue代码： -
在App.vue中书写如下代码：
-
在route包下的index.js中书写如下代码：
-
初始页面
5. 效果图如下：
二、动态路由
- 书写User.vue组件，代码如下：
- 在App.vue中代码如下：
- 配置路由代码如下：
- 效果如下：
三、嵌套路由
- 修改A.vue组件代码如下：
- 新增一个组件A1，代码如下：
- 配置路由，代码如下：
- 效果图如下：