Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转
在上一篇的博文中，实现的跳转是在页面中进行实现的
利用vue-router实例方法，使用js对路由进行动态跳转；
1、router.push：参数为路由对象，跳转到指定路由，跳转后会产生历史记录；
<!--动态跳转的按钮-->
<div>
<button @click="push">push返回首页</button>
</div>
new Vue({
//router : router
router : myRouter, //4 注入路由 简写
methods:{
push(){
myRouter.push({
path:'/home'
})
}
}
}).$mount("#one");
2、router.replace：参数为路由对象，跳转到指定路由，跳转后不产生历史记录；
由效果图可以发现点击replace前往美食广场按扭得时候并不会产生任何的历史记录
<!--动态跳转的按钮-->
<div>
<button @click="push">push返回首页</button>
<button @click="replace">replace前往美食广场</button>
</div>
methods:{
push(){
myRouter.push({
path:'/home'
})
},
replace(){
myRouter.replace({
path:'/foods'
})
}
}
3、router.go：参数为number，number为正向前跳转，为负向后跳转，根据number的值跳转到对应页面，前提是必须有历史记录可供跳转；
4、router.back：无参，后退一个页面，需要有历史记录；
router.forward：无参，前进一个页面，需要有历史记录；
使用的代码：
<!--动态跳转的按钮-->
<div>
<button @click="push">push返回首页</button>
<button @click="replace">replace前往美食广场</button> <button @click="go(-1)">go(-)后退历史记录</button>
<button @click="go(2)">go()前进历史记录</button> <button @click="back">back返回</button>
<button @click="forward">forward前进</button>
</div>
methods:{
push(){
myRouter.push({
path:'/home'
})
},
replace(){
myRouter.replace({
path:'/foods'
})
},
go(n){
myRouter.go(n);
},
back(){
myRouter.back();
},
forward(){
myRouter.forward();
}
}
以上就是通过js实现动态的跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 路由的动态跳转</title>
</head>
<body>
<div id="one">
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>
<!--将数据显示在这里-->
<router-view></router-view>
</div>
<!--动态跳转的按钮-->
<div>
<button @click="push">push返回首页</button>
<button @click="replace">replace前往美食广场</button> <button @click="go(-1)">go(-)后退历史记录</button>
<button @click="go(2)">go()前进历史记录</button> <button @click="back">back返回</button>
<button @click="forward">forward前进</button>
</div>
</div>
</body>
<template id="foods"> <div> <h2>美食广场</h2>
<ul>
<router-link to="/foods/bjc/北京烤鸭/68" tag="li"> 北京菜</router-link>
<router-link to="/foods/hnc" tag="li"> 湖南菜</router-link>
<router-link to="/foods/xc?name=剁椒鱼头&price=128" tag="li"> 湘菜</router-link>
<router-link :to="ycParam" tag="li"> 粤菜</router-link>
<router-link :to="sccParam" tag="li"> 四川菜</router-link>
</ul> <router-view></router-view>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue-router.js" ></script>
<script> //1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "#foods",
data(){ return{
sccParam:{ name:'sccRouter', params:{ name:"麻婆豆腐",
price:
}
}, ycParam:{
path:'/foods/yc',
query:{
name:"蜜汁叉烧",
price: } }
}
}
} //定义foods中的子组件 let Bjc={ props:['name','price'],
template : "<h3>北京菜 菜名：{{name}} 价格：{{price}}</h3>" } let Hnc={
template : "<h3>湖南菜 </h3>" }
let Xc={
props:['name','price'],
template : "<h3 >湘菜 菜名：{{name}} 价格：{{price}}</h3>" } let Yc={
props:['name','price'],
template : "<h3>粤菜 菜名：{{name}} 价格：{{price}}</h3>" } let Scc={
props:['name','price'],
template : "<h3>四川菜 菜名：{{name}} 价格：{{price}}</h3>" } //2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods, children:[
{
path:"bjc/:name/:price",//定义其属性
component:Bjc,
props:true },
{
path:"hnc",
component:Hnc }, {
path:"xc",
component:Xc,
props : (route) => ({
name : route.query.name,
price : route.query.price
}) },
{
path:"yc",
component:Yc,
props:{ name:'蜜汁叉烧量版式',
price:
} },
{
name:'sccRouter',
path:"scc",
component:Scc,
props:true } ]
},
{
path:"*",
redirect:"/home"
}
] // 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes,
//mode:'history'
linkActiveClass : "active" }); new Vue({
//router : router
router : myRouter, //4 注入路由 简写
methods:{
push(){ myRouter.push({ path:'/home'
})
},
replace(){
myRouter.replace({ path:'/foods'
})
}, go(n){ myRouter.go(n);
},
back(){
myRouter.back();
},
forward(){ myRouter.forward();
}
}
}).$mount("#one");
</script>
<style> .active{
color: white; background-color: black;
}
</style>
</html>
路由的动态跳转的总demo
Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转的更多相关文章
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue Router 常见问题（push报错、push重复路由刷新）
Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 使用路由对象获取参数
使用路由对象$route获取参数: 1.params: 参数获取:使用$route.params获取参数: 参数传递: URL传参:例 <route-linke to : "/food ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 vue-router路由
vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用: 单页应用(SPA)只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容:简单来说,根据不同的url与数据, ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 使用props替代路由对象的方式获取参数
在上一章博文中使用路由对象$route获取参数时,组件和路由对象耦合,在这篇博文中就可以使用props来进行解耦: 1.在组件中使用props选项定义数据,接收参数: 2.在路由中,使用props选项 ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue系列：Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
随机推荐
- DAY8-python异常处理
一.什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异常如下 而错误分两种 #语 ...
- python爬虫（3）--异常处理
1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网 连接不到特定的服务器 服务器不存在 在代码中,我们需要用try-except语句来包围并捕获相应的异常. ...
- java虚拟机垃圾回收机制详解
首先,看一下java虚拟机运行的时候内存分配图: jvm虚拟机栈:一个是线程独有的,每次启动一个线程,就创建一个jvm虚拟机栈,线程退出的时候就销毁.这里面主要保存线程本地变量名和局部变量值. 本地方 ...
- 第6章 使用springboot整合netty搭建后台
我们不会去使用自增长的id,在现阶段的互联网开发过程中,自增长的id是已经不适用了.在未来随着系统版本的迭代,用户数量的递增,肯定会做分库分表,去做一些相应的切分.在这个时候我们就需要有一个唯一的id ...
- Centos7安装mysql缺乏yum源怎么安装
找到mysql5.6的centos的repo源,终于解决mysql的安装问题: 1.确保centos安装了wget,没有的话安装wget 1 yum install wget 2.下载mysql的 ...
- 怎么把网页保存为pdf文件
不就是用chrome浏览器打印功能,然后保存为pdf就可以了吗? 对于一些结构简单的比如,RFC文档这样操作一般没什么问题,对于一些有浮动元素的网页就不好说了,必须先用chrome的审查元素把一些不必 ...
- 你可能不知道的pdf的功能
可以创建交互式的pdf,比如在pdf页面添加一个按钮, 添加一个文本框. 上篇文章说了pdf有可移植性,这是个非常重要的特性,我就想能否把3d模型放入到pdf中,这样即使对方电脑没有3d软件也可以查看 ...
- Ubuntu16安装GTK+2.0教程
Step 1 修改清华源(修改完可提高下载速度) 先运行 sudo gedit /etc/apt/sources.list 替换文本内容,保存,退出. # 默认注释了源码镜像以提高 apt updat ...
- html相关标记的含义
HTML标记含义1.<html>...</html> :html 文档标记2.<head>...</head> :文档头标记3.<title> ...
- php获取数据库结果集
PHP经常要访问数据库提前数据库里面的数据,那么该怎么样去提前数据呢? 提取数据库代码如下: <?phpinclude("conn.php");//数据库连接 $sql=&q ...