vue路由的配置和页面切换详解


Posted in Javascript onSeptember 09, 2020

1.vue路由

可以实现单页面应用。

路由三要素:

vue路由通过hash的变化切换页面(组件/div)

<router-link>导航

<router-view>存储页面(组件)的容器

src/router/index.js路由的配置

实现步骤:

vue路由的配置和页面切换详解

2.router配置

对router文件夹下的index.js进行配置

path:url

name:对应的参数的模块名称

component:组件名

用组件时一定要注册

{
 path: '/product',
 name: 'Product',
 component: Product
 }

3.实现传参配置

配置

{
 path: '/product/:id',
 name: 'Product',
 component: Product
 }

切换: <router-link to="/product/666">产品666</router-link>

接收: {{$route.params.id}}

4 子页面

配置

{
 path: '/admin',
 name: 'Admin',
 component: Admin,
	children:[
		{path:"ucenter",component:Ucenter},
		{path:"activity",component:Activity},
		{path:"",redirect:"ucenter"}//重定向
	]
 },

重定向: {path:"",redirect:"ucenter"}

创建新的别名: alias:["/home","/main"]

切换: <router-link to="/admin/ucenter"></router-link>

5 页面切换

跳转:$router.go(-1)

后退:$router.back()

前进: ```$router.forward()``

新加历史记录切换页面:$router.push()

替换当前页面(不留历史记录):$router.replace()

总结

到此这篇关于vue路由的配置和页面切换的文章就介绍到这了,更多相关vue路由的配置和页面切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 #Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 #Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 #Javascript
vue实现几秒后跳转新页面代码
Sep 09 #Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
You might like
递归列出所有文件和目录
2006/10/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP mkdir()定义和用法
2009/01/14 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Yii全局函数用法示例
2017/01/22 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
什么是.net
2015/08/03 面试题
汽车维修专业个人求职信范文
2014/01/01 职场文书
网络维护中文求职信
2014/01/03 职场文书
立志成才演讲稿
2014/09/04 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
个人查摆剖析材料
2014/10/04 职场文书
学习保证书怎么写
2015/02/26 职场文书
师范生小学见习总结
2015/06/23 职场文书