北京市网站建设公司,营销策划公司名字简单大气,全球装饰公司排名,企业网站建设经济效益分析5 Vue路由
5.1 路由介绍
将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级#xff0c;其结构如下#xff1a; 此时我们希望基于4.4案例中的功能#xff0c;实现点击侧边栏的部门管理#xff0c;显示部门管理的信息其结构如下 此时我们希望基于4.4案例中的功能实现点击侧边栏的部门管理显示部门管理的信息点击员工管理显示员工管理的信息效果如下图所示 这就需要借助我们的vue的路由功能了。
前端路由URL中的hash(#号之后的内容与组件之间的对应关系如下图所示 当我们点击左侧导航栏时浏览器的地址栏会发生变化路由自动更新显示与url所对应的vue组件。 而我们vue官方提供了路由插件Vue Router,其主要组成如下 VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件 router-link请求链接组件浏览器会解析成a router-view动态视图组件用来渲染展示与路由路径对应的组件 其工作原理如下图所示 首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
然后我们页面提供一个router-link组件,用户点击发出路由请求;
接着我们的VueRouter根据路由请求在路由表中找到对应的vue组件
最后VueRouter会切换router-view中的组件从而进行视图的更新 5.2 路由入门
接下来我们来演示vue的路由功能。
首先我们需要先安装vue-router插件可以通过如下命令
npm install vue-router3.5.1
但是我们不需要安装因为当初我们再创建项目时已经勾选了路由功能已经安装好了。
然后我们需要在src/router/index.js文件中定义路由表根据其提供的模板代码进行修改最终代码如下
import Vue vue
import VueRouter vue-routerVue.use(VueRouter)const routes [{path: /emp, //地址hashname: emp,component: () import(../views/tlias/EmpView.vue) //对应的vue组件},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)}
]const router new VueRouter({routes
})export default router注意需要去掉没有引用的import模块。
在main.js中我们已经引入了router功能如下图所示 路由基本信息配置好了路由表已经被加载此时我们还缺少2个东西就是router-lin和router-view,所以我们需要修改2个页面EmpView.vue和DeptView.vue我们左侧栏的2个按钮为router-link,其代码如下
el-menu-item index1-1router-link to/dept部门管理/router-link
/el-menu-item
el-menu-item index1-2router-link to/emp员工管理/router-link
/el-menu-item
然后我们还需要在内容展示区域即App.vue中定义route-view作为组件的切换其App.vue的完整代码如下
templatediv idapp!-- {{message}} --!-- element-view/element-view --!-- emp-view/emp-view --router-view/router-view/div
/template
script
// import EmpView ./views/tlias/EmpView.vue
// import ElementView ./views/Element/ElementView.vue
export default {components: { },data(){return {message:hello world}}
}
/script
style
/style
但是我们浏览器打开地址 http://localhost:7000/ 发现一片空白因为我们默认的路由路径是/,但是路由配置中没有对应的关系
所以我们需要在路由配置中/对应的路由组件代码如下
const routes [{path: /emp,name: emp,component: () import(../views/tlias/EmpView.vue)},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)},{path: /,redirect:/emp //表示重定向到/emp即可},
]
此时我们打开浏览器访问http://localhost:7000 发现直接访问的是emp的页面并且能够进行切换了其具体如下图所示 到此我们的路由实现成功。
