vue.js路由参数简单实例讲解------简单易懂
vue中，我们构建单页面应用时候，一定必不可少用到vue-router
vue-router 就是我们的路由，这个由vue官方提供的插件
首先在我们项目中安装vue-router路由依赖
第一种，我们提供命令行来安装
npm install vue-router --save
第二种，我们直接去官方github下载
https://github.com/vuejs/vue-router
路由参数设置
1，实例化一个路由，然后路由映射表中的地址带参数,这个参数就是路由的参数
接着给映射表中的路由设置一个name值
语法
{path:"/home/:id,component:home,name:"wang"}
2.当我们挂载Vue实例上去后，我们在home组件中，要获取当前路由参数
语法 this.$route.params.参数名字
3.根据当前参数不同，设置路由导航去不同的路径
<router-link :to="{name:'wang',params:{id:1}}></router-link>
下面做一个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--如果使用动态绑定，而且还有params 必须要给路由增加名字-->
<router-link v-for="(item,index) in article" :key="index" :to="{name:'wang',params:{id:item.id}}" tag="div">{{item.title}}</router-link>
<router-view></router-view>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
//定义一个组件
let Article={
template:"<div>这是第{{id}}篇</div>",
computed:{
id(){
//获取路由路径的参数值
return this.$route.params.id;
},
name(){
//获取路由路径的参数值
return this.$route.params.name;
}
}
}
//路由路径映射表
let routes=[
//:id表示必须传递参数，但是内容可以是随机的
//会将当前冒号后面的值和真实传递的值组成一个对象
// this.$route.params={id:123}
//{path:'',component:E} //默认路由，相当于配置了一个
//{path:'*',redirect:'/article/:1'} //默认重定向，一般用作404页面，会导致路径改变
{path:"/article/:id",component:Article,name:'wang'} ]
//实例化一个路由
let router=new VueRouter({
routes
})
router.push('/article/1'); //默认加载第一个路径设置
let vm=new Vue({
el:"#app",
data:{
article:[
{title:"111",id:1},
{title:"111",id:2},
{title:"111",id:3}
]
},
router
})
</script>
</html>
vue.js路由参数简单实例讲解------简单易懂的更多相关文章
- vue.js路由vue-router（一）——简单路由基础
前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
- vue.js路由vue-router
学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- vue.js学习之入门实例
之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue.js路由嵌套
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- Vue.js路由组件
1.如果在创建项目中,没有自动安装vue router,那就自行安装.cnpm install vue-router --save vue-router两种模式 hash模式和history模式. 默 ...
随机推荐
- 构建 MariaDB Galera Cluster 分布式数据库集群（二）
MariaDB的安装 构建 MariaDB Galera Cluster之前,首先安装MariaDB,本文使用的版本是10.1 1.环境准备 主机: MariaDB01(192.168.56.102) ...
- Tomcat和Java Virtual Machine的性能调优总结
就算生不逢时,也该理解理解了.已经在Java界快混迹3年了,对于一些性能调优的话题我是一直插不上嘴,只是针对昨晚看到的一篇性能调优的文章,我忍不住了. Tomcat性能调优: 找到Tomcat根目录下 ...
- github 或者gitlab 设置添加SSH
克隆项目二种方式: 1. 使用https url克隆, 复制https url 然后到 git clone https-url 2.使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH ...
- HDU 6043 KazaQ's Socks （规律）
Description KazaQ wears socks everyday. At the beginning, he has nn pairs of socks numbered from 11 ...
- Java的三种代理模式简述
本文着重讲述三种代理模式在java代码中如何写出,为保证文章的针对性,暂且不讨论底层实现原理,具体的原理将在下一篇博文中讲述. 代理模式是什么 代理模式是一种设计模式,简单说即是在不改变源码的情况下, ...
- 百分比相对计算注意事项CSS3
百分比计算 1.涉及元素定位,和大小计算,基于元素自身的包含块. 2.元素背景图的大小计算,位置计算,基于元素自身的宽,高. 2.元素图片边框使用的图图片大小计算,基于元素自身的宽,高.
- Java读取properties文件(非泛滥)
根据spring配置文件的 PropertiesFactoryBean和 PropertyPlaceholderConfigurer可以选择不同的加载方式,我是使用System.setProperty ...
- Orleans例子再进一步
Orleans例子再进一步 这是Orleans系列文章中的一篇.首篇文章在此 步骤 现在我想再添加一个方法,到IGrains项目内,这个方法里面有个延迟3秒,然后返回一个Task<string& ...
- RecyclerView 配合 DiffUtil，好用到飞起
版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 一.前言 DiffUtils ...
- Kotlin 初窥门径[1]:基础概念
Kotlin 是由 JetBrains 开发的基于JVM的语言.JetBrains 因为创造了一个强大的Java开发 IDE(Intellij) 而被大家所熟知.Android Studio 就是基于 ...