怎么用Vue-Router实现多页面切换？

用Vue-Router实现多页面切换1.下载Vue-Router2.创建专属文件夹，文件夹里创建js进行配置config 配置mode网址显示的方式为正常的路径routes 配置各地址对应的组件默认地址 ‘/’ 显示主页组件若多个页面要用到同一个组件只是其中请求数据不同可在其后面加：id 不一定必须取id，可以自己定义'*'表示以上所有地址都未匹配到则执行404错误页面name 是为了更好更

Might°

8547人浏览 · 2020-08-12 10:57:04

Might° · 2020-08-12 10:57:04 发布

用Vue-Router实现多页面切换

1.下载Vue-Router

在这里插入图片描述

2.创建专属文件夹，文件夹里创建js进行配置

在这里插入图片描述
config 配置mode网址显示的方式为正常的路径
routes 配置各地址对应的组件默认地址 ‘/’ 显示主页组件
若多个页面要用到同一个组件只是其中请求数据不同可在其后面加：id 不一定必须取id，可以自己定义
'*'表示以上所有地址都未匹配到则执行404错误页面
name 是为了更好更精确的跳转到想要页面如果只是path的话，改变path则将会找不到页面，而有了name之后，不管怎么修改path地址，都会跳转到该name的对应地址。
在这里插入图片描述

index 导入 vue-router vue config
使用vue-router
将config传入配置vue-router 返回配置好的router
在这里插入图片描述

使用vue-router

导入router 在vue实例对象中加入router
在这里插入图片描述
在app.vue组件运用 router-view 标签
router-view 标签会根据页面地址的变化而选择性的让对应的组件显示，从而实现单页面中多页面切换。

在这里插入图片描述
通过router-link 标签相当于a标签不过使用router-link可防止页面刷新
配合 to搭配对应地址使用 to 中配置跳转的对应name
同一name多页面可以进行详细匹配配置对应页面的id 和请求数组的id是否一致来切换

在这里插入图片描述

End

index
在这里插入图片描述

news
在这里插入图片描述
news

login

这样就成功执行了用vue-router 多页面切换啦~
点个赞，米娜 0.0

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^