vue router中,实现路由跳转的方法,vue路由页面跳转
本文主要介绍vue路由视图的路由器视图嵌套跳转。主要内容是制作一个登录页面，跳转到首页。主页包含菜单栏、顶部导航栏、主体和标准背景网页格式。点击菜单显示不同的页面。感兴趣的朋友请参考以下文章。
目录
1、修改app.vue页面2、创建登录页面(/views/login/login.vue)2.1、在router/index.js中添加登录页面route 3、创建主页(/components/index.vue)3.1、创建主页route 4、修改首页4.1、以及
目的：制作登录页面，跳转到首页。主页包含菜单栏、顶部导航栏、主体和标准背景网页格式。点击菜单栏中不同的菜单，控制主体显示不同的组件(不同的页面)。
配置路由器视图嵌套跳转，需要准备两个主页面，一个是app.vue跳转的登录页面(login.vue)，一个是login页面(login.vue)跳转的主页(index.vue)。此外，还需要两个用于菜单跳转的页面，页面内容是定制的。
实现功能：
我这里使用的是element-ui作为模板元素介绍-用户界面
执行项目目录中的命令：npm i element-ui -s
修改main.js，引入元素组件。
前置：
创建一个登录页面(login.vue)
创建后台操作页面(index.vue)
配置后台操作页面菜单跳转
配置嵌套路由视图路由控制菜单跳转
1、修改app.vue页面
app只需要在页面放置一个router-view标签，每个路由请求都会默认从这里进入并跳转。
模板
div id=应用程序
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
方法：{
}
}
/脚本
风格
/风格
2、创建登录页面（/views/login/login.vue）
这里的登录按钮直接跳转到主页面，当前登录页面会被完全替换。
步骤：:点向下：
模板
div id=登录
el格式
el-row :gutter=20
El-col class= title :offset= 9 :span= 6
H1 a登录页面/h1
/el-col
/el-row
el-row :gutter=20
El-col class= col-label :offset= 7 :span= 4
Class= label 账号：/span
/el-col
el-col :span=4
El-input type= text placeholder=请输入帐号 v-model= account . username /El-input。
/el-col
/el-row
el-row :gutter=20
El-col class= col-label :offset= 7 :span= 4
Class= label 密码：/span
/el-col
el-col :span=4
El-input type= password placeholder=请输入密码 v-model= account . password /El-input
/el-col
/el-row
el-row :gutter=20
el-col :offset=8 :span=8
跨度
a href= # rel= external noflowl rel= external noflowl @ click= register 注册一个帐户/a
/
a href= # rel= externalnofowl rel= externalnofowl @ click= reset pwd 重置密码/a
/span
/el-col
/el-row
el-row :gutter=20
el-col :offset=10 :span=4
El-button type= primary round @ click= on submit 登录/el-button
/el-col
/el-row
/el格式
/div
/模板
脚本
导出默认值{
名称：登录，
data() {
返回{
账户：{
用户名： ，
密码：“”
}
}
},
方法：{
注册(){
这个。$message({
留言：‘好像没有这个功能’，
类型：“信息”
})
},
resetPwd() {
这个。$message({
留言：“下辈子”，
类型：“成功”
})
},
onSubmit() {
这个。$router.push(/index )
}
}
}
/脚本
样式范围
#登录{
文本对齐：居中；
边距：0自动；
}。标签{
高度：40px
行高：40px
}。列标签{
文本对齐：右对齐；
}。el-row {
边距-顶部：15px
}。埃尔按钮{
宽度：120像素
}。标题{
保证金-最高：10%;
}
/风格
查看代码
2.1、在router/index.js中添加登录页面路由
{
路径："/",
名称：登录，
组件：()=导入(./查看/登录/登录。vue’)
},
3、创建主页面（/components/index.vue）
主页面主要分为三块，左侧菜单栏(el菜单),顶部导航栏(el容器),主体展示页面(el-main)，这部分是从elment-ui中的布局容器实例拷贝过来的(https://element.eleme.cn/#/zh-CN/component/container)
模板
El-container style= border:1px solid # eee
El-aside width= 200 px style= background-color:RGB(238，241，246)
El-menu:default-openeds=[ 1 ]:router= true
埃尔-子菜单索引=1
模板slot= title I class= El-icon-message /I导航一/模板
埃尔-菜单-项目-组
模板槽=标题分组一/模板
埃尔菜单项索引=1-1 选项1/el菜单项
埃尔菜单项索引=1-2 选项2/el菜单项
/El-菜单项-组
/El-子菜单
/el-menu
/El-旁白
el-container class=table-div
El-header style= text-align:right；字体大小：12px
埃尔-下拉菜单
I class= El-icon-setting style= margin-right:15px /I
El-下拉菜单-菜单slot=dropdown
埃尔-下拉列表-项目查看/El-下拉列表项
埃尔-下拉列表-项目新增/El-下拉列表项
埃尔-下拉列表-项目删除/El-下拉列表项
/El-下拉菜单
/El-下拉列表
跨度王小虎/span
/el-header
埃尔梅因
桌子/桌子
/el-main
/El-容器
/El-容器
/模板
风格。埃尔标题{
背景色：# B3C0D1
颜色：# 333;
行高：60px
}。El侧{
颜色：# 333;
}
/风格
脚本
导出默认值{
名称："索引",
data() {
}
}
/脚本
风格。表格-div
宽度：100%;
}。埃尔表{
身高：100%;
}
/风格
3.1、创建主页面路由
{
路径："/index "，
名称："索引",
component:()=import( @/components/index )
}
至此，由登录页面跳转到主页面的操作配置就完成了。看看效果。登录页代码,访问http://localhost:8080/#/
启动项目
4、修改首页
主要修改两个部分：点击登录，跳转到首页
4.1、开启菜单路由模式，并修改菜单跳转路径
在埃尔菜单菜单中开启某视频剪辑软件路由器模式，并在埃尔-菜单项标签中的索引菜单跳转路径，主体配置路由视图
4.2、添加router-view
直接将主体内容替换为路由器视图标签，并为名字属性添加参数，我这使用桌子标识，这个很重要，配置要跳转的页面地址
5、创建两个子页面
页面可以在任意位置，只要路由地址配置正确即可
我这创建了first-page.vue，first-table.vue(页面内容自定义)
在路由器/索引. js配置路由，在哪个页面下增加的路由器视图组件，就在相应的路由配置中添加孩子们，这里是在指数路由修改配置，添加孩子们，配置路径、名称和组件（这里注意，如果只配置默认路由视图跳转，用的参数是组件，配置多路由视图跳转时组件)
{
路径："/index "，
名称："索引",
component:()=import( @/components/index )，//这里配置首页默认路由跳转的页面组件
孩子：[ //添加子路由
{
路径："页面",//注意点：路径前面不要带/,否则无法跳转，在这里吃过亏
名称：页面，
组件：{ //注意参数名带s
table:()=import( @/components/首页)//这里的桌子跟首页的路由器视图标签的名字一致，才会在首页的路由视图进行跳转，看3.2
}
},
{
路径："表",
名称："表",
组件：{
表：()=导入( @/组件/首表)
}
}
]
}
这样配置访问地址为：本地主机：8080/#/索引/页面、本地主机：8080/#/索引/表格
到这里配置完成，路由需要根据这个name属性指定跳转的路由视图
可以看到，两个菜单配置改变了主体的路由视图，控制视图展示的页面组件。配置完成
关于vue routing view router-view嵌套跳转的细节本文到此为止。关于vue路由视图router-view嵌套跳转的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。