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 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
JS实现打砖块游戏
Feb 14 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
javascript 播放器 控制
2007/01/22 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
详解easyui 切换主题皮肤
2019/04/04 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
自荐信的基本格式
2014/02/22 职场文书
入党自我鉴定
2014/03/25 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
goland 设置project gopath的操作
2021/05/06 Golang