怎样做电商,惠州网站关键字优化,wordpress 编辑图片无法显示,小程序注册个人和企业有什么区别目录 路由 Vue-Router1、Vue-Router 介绍2、路由配置3、嵌套路由3.1、简介3.2、实现步骤3.3、⭐注意事项 4、⭐router-view标签详解 #x1f343;作者介绍#xff1a;双非本科大三网络工程专业在读#xff0c;阿里云专家博主#xff0c;专注于Java领域学习#xff0c;擅… 目录 路由 Vue-Router1、Vue-Router 介绍2、路由配置3、嵌套路由3.1、简介3.2、实现步骤3.3、⭐注意事项 4、⭐router-view标签详解 作者介绍双非本科大三网络工程专业在读阿里云专家博主专注于Java领域学习擅长web应用开发、数据结构和算法初步涉猎Python人工智能开发和前端开发。 主页逐梦苍穹 所属专栏前端专栏的其他文章详见文末❀ 您的一键三连是我创作的最大动力 路由 Vue-Router 1、Vue-Router 介绍
vue 属于单页面应用所谓路由就是根据浏览器路径不同用不同的视图组件替换这个页面内容。不同的访问路径对应不同的页面展示。
在vue应用中使用路由功能需要安装Vue-Router注创建完带有路由功能的前端项目后在工程中会生成一个路由文件如下所示关于路由的配置主要就是在这个路由文件中完成的。为了能够使用路由功能在前端项目的入口文件main.js中创建Vue实例时需要指定路由对象
2、路由配置
首先了解一下路由组成
VueRouter路由器根据路由请求在路由视图中动态渲染对应的视图组件router-link路由链接组件浏览器会解析成router-view路由视图组件用来展示与路由路径匹配的视图组件 具体配置方式1、在路由文件/router/index.js中配置路由路径和视图的对应关系
import Vue from vue
import VueRouter from vue-router
import HomeView from ../views/HomeView.vueVue.use(VueRouter)//维护路由表某个路由路径对应哪个视图组件
const routes [{path: /,name: home,component: HomeView},{path: /about,name: about,component: () import(/* webpackChunkName: about */ ../views/AboutView.vue)},{path: /404,component: () import(../views/404View.vue)},{path: *,redirect: /404}
]const router new VueRouter({routes
})export default router2、在视图组件中配置 router-link标签用于生成超链接
router-link to/Home/router-link |
router-link to/aboutAbout/router-link |
router-link to/testTest/router-link |3、在视图组件汇总配置router-view标签要实现路由跳转可以通过标签式和编程式两种
标签式About编程式this.$router.push(‘/about’)
问题思考 如果用户访问的路由地址不存在该如何处理可以通过配置一个404视图组件当访问的路由地址不存在时则重定向到此视图组件具体配置如下
{path: /404,component: () import(../views/404View.vue)
},
{path: *,redirect: /404 //重定向
}3、嵌套路由 3.1、简介
嵌套路由组件内要切换内容就需要用到嵌套路由子路由效果如下在App.vue视图组件中有标签其他视图组件可以展示在此ContainerView.vue组件可以展示在App.vue视图组件的位置 ContainerView.vue组件进行了区域划分分为上、左、右在右边编写了标签点击左侧菜单时可以将对应的子视图组件展示在此
3.2、实现步骤
第一步安装并导入 elementui实现页面布局Container 布局容器—ContainerView.vue
templateel-containerel-headerHeader/el-headerel-containerel-aside width200px/el-asideel-main/el-main/el-container/el-container
/templatescript
export default {}
/scriptstyle
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
/style第二步提供子视图组件用于效果展示 -P1View.vue、P2View.vue、P3View.vue
templatediv这是P1 View/div
/templatescript
export default {}
/scriptstyle
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
/style第三步在 src/router/index.js 中配置路由映射规则嵌套路由配置
{path: /c,component: () import(../views/container/ContainerView.vue),//嵌套路由子路由对应的组件会展示在当前组件内部children: [//通过children属性指定子路由相关信息path、component{path: /c/p1,component: () import(../views/container/P1View.vue)},{path: /c/p2,component: () import(../views/container/P2View.vue)},{path: /c/p3,component: () import(../views/container/P3View.vue)}]
}第四步在ContainerView.vue 布局容器视图中添加实现子视图组件展示
el-mainrouter-view/
/el-main第五步在ContainerView.vue 布局容器视图中添加实现路由请求
el-aside width200pxrouter-link to/c/p1P1/router-linkbrrouter-link to/c/p2P2/router-linkbrrouter-link to/c/p3P3/router-linkbr
/el-aside注意子路由变化切换的是【ContainerView 组件】中 部分的内容问题思考1.对于前面的案例如果用户访问的路由是 /c会有什么效果呢如何实现在访问 /c 时默认就展示某个子视图组件呢配置重定向当访问/c时直接重定向到/c/p1即可如下配置
3.3、⭐注意事项
子路由的路径不需要以 / 开头。因为以 / 开头的路径将会被视为根路径。子路由的完整路径是由其所有的祖先路由的路径和自己的路径拼接而成的。例如/user/:id/profile 路径是由 /user/:id 和 profile 拼接而成的。子路由的写法要么/父/子要么子更多关于嵌套路由的信息你可以查阅Vue Router官方文档。
4、⭐router-view标签详解
router-view/ 是 Vue Router 的一个核心组件它是一个功能性的组件用于渲染匹配的路由组件。当你的应用访问一个路由路径时Vue Router 会查找与该路径匹配的路由配置然后将该路由配置中的组件渲染到 router-view/ 所在的位置。例如假设你有以下的路由配置
const routes [{ path: /home, component: Home },{ path: /about, component: About }
]当你访问 /home 路径时Home 组件会被渲染到 router-view/ 所在的位置当你访问 /about 路径时About 组件会被渲染到 router-view/ 所在的位置。此外router-view/ 还可以嵌套使用以支持显示嵌套路由。在嵌套路由的配置中子路由的组件将会被渲染到父路由组件内部的 router-view/ 中。例如假设你有以下的嵌套路由配置
const routes [{ path: /user, component: User,children: [{path: profile,component: UserProfile},{path: posts,component: UserPosts}]}
]当你访问 /user/profile 路径时User 组件会被渲染到最外层的 \router-view/ 中而 UserProfile 组件会被渲染到 User 组件内部的 router-view/ 中。 ⭐前端的其他文章 1-创建vue工程 2-vue的基本使用
