vue --- Vue中的路由跳转问题
import Vue from 'vue'
import Router from 'vue-router' // 前2个导入时vue框架自带的
import SayHi from '@/components/SayHi' // 这个导入是自己写的位于components下的sayHiVue.use(Router) // 用到了vue的Router模块
export default new Router({routes: [{path: '/say_hi', // 在浏览器中输入@/#/say_hiname: 'SayHi', // 给处理这条路由的js文件起名为SayHi,一般就是浏览器中输入的驼峰命名法命名的component: SayHi // 处理该路由的组件,在上面导入的},]
})
path: 定义链接地址, 如/#/say_hi
name: 表示为这个路由加名字, 方便以后引用, 如this.$route.push({name:'SayHi'})
component: 表示该路由由哪个component来处理.
// 跳转到某个路由时带上参数 --- > 普通的参数
routes: [{path: '/blog',name: 'Blog'}
]
// 在视图中,我们这样做:
<router-link :to="{name: 'Blog', query:{id:3} }">User</router-link>
// 用户点击这个代码生成的 html 页面时, 就会触发跳转.// 在<script />中,我们这样做:
this.$router.push({name: 'Blog', query: {id: 3}})// 上面两个都会跳到/#/blog?id=3
// 跳到某个路由时带上参数 --- > 在路由中声明的参数
routes: [{path: '/blog/:id',name: 'Blog'},
]// 在视图中,我们这样做:
<router-link :to="{name: 'Blog', params: {id: 3} }">User</router-link>// 在script中,我们这样做:
this.$router.push({name: 'Blog', params: {id: 3}})
// 上面两个都会跳转到/#/blog/3 ps:与上面块(/#/blog?id=3)的区别
// 根据路由获取参数
--- > 对于 /#/blogs?id=3 中的参数,可以这样获取
this.$route.query.id // 返回结果3--- > 对于 /#/blogs/3 这样的参数,可以对应的路由是:
routes: [{path: '/blog/:id', // 注意此处的id...}
]
可以采取以下的代码来获取id
this.$route.params.id // 返回结果3
参考 《Vue.js快速入门》 P92~P94
vue --- Vue中的路由跳转问题相关推荐
- vue中实现路由跳转的三种方式(超详细整理)
vue中实现路由跳转的三种方式 一.使用vue-router vue-router 本质是一个第三方的包 用的时候需要下载 步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
- vue 函数 路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方 需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
- vue中的路由跳转和传参
一:注意:在 Vue 实例中,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面: 想要导航到不同的 ...
- vue中的路由跳转方法,详细(vue路由跳转)
一.<router-link/>方式 简述:通过to属性和path和name进行跳转,并进行参数传递: 1.无参数跳转(path和name) eg: <router-link to= ...
- vue路由跳转权限_如何在vue中实现路由跳转判断用户权限功能?
实现这类校验有几个步骤. 1.设置路由是否需要校验的阀值. // 路由配置的地方谁知阀值 routes:[ { name:'admin', path:'/admin', component:'..., ...
- 使用vue-i18n切换中英文-网页语言切换案例-vue文件中或路由(Router)文件中使用
vue-i18n地址 安装 npm install vue-i18n 使用 在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue- ...
- Vue3中实现路由跳转的过渡动画(一)
由于VueRouter官方文档写的太过抽象,真的特别不好理解,所以我来总结一下如何去更简单地理解路由跳转时的动画. 首先看一下官方对于这个概念的解释. 在刚开始学习的时候,看到黄色框框里内容直接傻眼, ...
- flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...
- 写在方法中的路由跳转
场景:login页面点击登陆按钮,登陆成功后,进入home页面:(当然,这里就不能用Link跳转了) 问题:history的报错: 解决:需要引入react-router-dom中的withRoute ...
- Angular中实现路由跳转并通过get方式传递参数
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
最新文章
- 团队暑期集训 - 基础DP练习
- Cordova打包教程知识体系整理(Vue项目打包成ipa)
- GDCM:寻找PatientRootQuery的测试程序
- GDCM:使用Stream Image Writer伪造图像的测试程序
- 洛谷P2342-叠积木
- 什么是前端开发中的Pseudo elements
- 使用JAXP对XML文档进行DOM解析
- 做权限认证,还不了解IdentityServer4?不二话,赶紧拥抱吧,.NET Core官方推荐!...
- python面向对象继承_四. python面向对象(继承)
- python如何引发和处理异常_在python3.6中,如何捕捉异常并引发异常以便稍后处理?...
- Apple Cached Service 导致 iPhone app store无法下载程序
- 【转】iOS 10 UserNotifications 使用说明
- TCP/IP详解 笔记十一
- 大数据治理的误区有哪些
- Android NDK开发从0到1
- atitit.研发管理--标准化流程总结---java开发环境与项目部署环境的搭建工具包总结
- idea代码格式化代码
- 密码学工具箱ToolsFx发布日志
- 第六章 多元函数微分学
- IDEA不支持SQL语法校验,一招搞定