浅谈vue-router 路由传参的方法
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。
1.新闻列表页模板
<template id="news">
<div>
<h2>新闻列表</h2>
<ul>
<li>
<router-link to="/news/001">新闻001</router-link>
</li>
<li>
<router-link to="/news/002">新闻002</router-link>
</li>
</ul>
</div>
</template>
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2.新闻详细页组件准备
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$route.params.id}}</span>
</div>
</template>
$route.params.id获取路由上的参数
3.定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },
4.全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<!-- 模板抽离出来 -->
<template id="home">
<!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
<div>
<h2>首页</h2>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>
<h2>新闻列表</h2>
<ul>
<li>
<router-link to="/news/001">新闻001</router-link>
</li>
<li>
<router-link to="/news/002">新闻002</router-link>
</li>
</ul>
</div>
</template>
<template id="login">
<div>登录界面</div>
</template>
<template id="reg">
<div>注册界面</div>
</template>
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$route.params.id}}</span>
</div>
</template>
<script type="text/javascript">
// 1. 定义（路由）组件。
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };
// 2. 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News,},
{ path: '/news/:id', component: NewsDetail },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#box')
// 现在，应用已经启动了！
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- vue2 router 动态传参,多个参数的实例
- vue-router2.0 组件之间传参及获取动态参数的方法
- vue router-link传参以及参数的使用实例
- vue router使用query和params传参的使用和区别
相关推荐
-
vue router-link传参以及参数的使用实例
1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数) 使用:this.$route.query.id 2.路径:http://localhost:8081/#/test/1 <router-link :to="'/test/'+id">跳转</ro
-
vue router使用query和params传参的使用和区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456
-
vue-router2.0 组件之间传参及获取动态参数的方法
1.标签 <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el.tog_line_id}}"> <img :src="el.image_list[0]"> <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3> <p>{{el.addre
-
vue2 router 动态传参,多个参数的实例
这个是用vue-cli生成的项目下使用 比如有个路由跳转时需要带两个参数: <router-link to='/tr'>查看</router-link> 可以这样写: <router-link to='/tr/uid/pid'>查看</router-link> 然后去router.js 中 处理这个路由: import Vue from 'vue' import Router from 'vue-router' import tr from '@/compo
-
如何处理vue router 路由传参刷新页面参数丢失
概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi
-
浅谈vue 二级路由嵌套和二级路由高亮问题
第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示: 在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示: 补充知识:vue - 子路由-路由嵌套 描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加
-
vue中路由传参以及跨组件传参详解
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由
-
浅谈Postman解决token传参的问题
问题描述: 有一个登陆接口获取token,其他接口再次访问都要带上token 解决方案: 1.在登陆接口访问后设置Postman的环境变量(Environment),例如设置环境变量名:token,值为登陆接口访问成功后,在responseBody中的token值,如何设置请看下面具体描述. 2.访问其他接口时token值直接读取变量即可.Postman里面获取变量的语法为:{{变量名}} 具体步骤: 1.登陆接口介绍 如图所示,login接口返回值JSON格式大体为: { "status&qu
-
浅谈Vue中插槽slot的使用方法
如何定义和使用: 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值,如果slot标签没有声明name属性值,在使用插槽时将默认从第一个插槽依次往下放置,为了方便使用,一般都会都插槽slot指定一个name属性值,当要使用该插槽时,只需要在要使用的标签内添加slot='插槽名字',就可以将指定的标签放到指定的插槽内,插槽内可以是任意内容. 举例: <!DOCTYPE html> <html lang="en"> <head&
-
浅谈vue-router 路由传参的方法
路由传参数.在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页. 1.新闻列表页模板 <template id="news"> <div> <h2>新闻列表</h2> <ul> <li> <router-link to="/news/001">新闻001</router-link> </li> <li> <
-
浅谈Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>
-
浅谈Vue组件及组件的注册方法
相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的开发时间.在一个项目中其实有很多可复用的代码块,如果我们可以把这些内容封装成一个组件就能够很方便的进行各种重复使用. 那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子. 使用组件 组件名大小写 定义组件名的方
-
3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$
-
React组件通信之路由传参(react-router-dom)
目录 最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传