Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式

时间:2023-02-16 18:00:20
第一种方法:
this.$router.push({path:'shopcontent?aid=3'}
 
第二种方法
 
this.$router.push({name:'news'}}
通过在main.js中配置路由时给router加上name 属性
const routes = [
 
{ path: '/Home', component: Home },
{ path: '/News', component: News,name:'news'},
{ path: '/Shopcontent', component:Shopcontent},
{ path: '/Content/:aid', component:Content},
]
 
路由的默认模式为hash模式要改为history模式
在实例化vuerouter的时候加上mode
const router = new VueRouter({
mode:'history',
routes // (缩写)相当于 routes: routes
})
 

Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式的更多相关文章

  1. vue编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  2. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  3. Vue 编程式导航,路由history模式

    import Vue from 'vue' import App from './App.vue' import Home from './components/Home.vue' import Ne ...

  4. vue 编程式导航

    // 命名的路由(这里的name为路由中定义的name名称) this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参 ...

  5. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  6. &lbrack;Vue 牛刀小试&rsqb;:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  7. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

  8. &lbrack;vue&rsqb;声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

  9. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

随机推荐

  1. Hadoop组件之-HDFS&lpar;HA实现细节&rpar;

    NameNode 高可用整体架构概述 在 Hadoop 1.0 时代,Hadoop 的两大核心组件 HDFS NameNode 和 JobTracker 都存在着单点问题,这其中以 NameNode ...

  2. Spark Streaming官方文档学习--上

    官方文档地址:http://spark.apache.org/docs/latest/streaming-programming-guide.html Spark Streaming是spark ap ...

  3. ICBC中的路由设置

    才去的中国工商银行,用身份证叫了A0076的号,前边还有26个人,闲来无聊果断拿出手机收取wifi.有两个ssid为ICBC的路由,信道分别是1号和6号,还好不需要密码,不过一会就连接上了. 那我先上 ...

  4. php调用webservice报错Class &&num;39&semi;SoapClient&&num;39&semi; not found

    原文:php调用webservice报错Class 'SoapClient' not found php在调用webservice时,报告如下类似错误: ( ! ) Fatal error: Clas ...

  5. Visual Studio 2017 for Mac 连接Git的奇怪问题

    VS for Mac连接Git的时候遇到个奇怪的问题, 无法将已存在的解决方案绑定并提交到GitHub中去. VS版本7.3.3 问题复现 以为自己操作有问题, 新建项目测试一下, 新建的时候没有勾选 ...

  6. 导出excel表格,前端和后台导出

    问题:项目框架中导出不知道有什么限制,数据稍微大点导出不了,向上面请求解决,结果一圈推下来又推回来了,所以决定自己写,参考了网上很多大神的博客,开始试了前端导出,想着比较简单,但是乱码问题始终解决不了 ...

  7. 错误:软件包:3&colon;docker-ce-18&period;09&period;4-3&period;el7&period;x86&lowbar;64 &lpar;docker-ce-stable&rpar; 需要:container-selinux &gt&semi;&equals; 2&period;9

    命令:yum -y install http://mirror.centos.org/centos/7/extras/x86_64/Packages/container-selinux-2.68-1. ...

  8. java 按概率产生

    import java.util.Random; import org.junit.Test; public class Demo1 { public void getChance(int perce ...

  9. python--yield and generator(生成器)简述

    1.想象一个场景:       设想,我想要100个素数,然后对它们累加求和. 通常的想法是,找一个一次性至少能提供100个素数的工具(函数),让它把这100个素数交给我(用return 一次性返回含 ...

  10. BUG YII2&period;0 &dollar; is not defined

    来源:https://www.cnblogs.com/attitudeY/p/6279985.html BUG描述:$ is not defined 没有加载jquery成功 原因:Yii2.0将JS ...