vue-router 路由传参用法实例分析
更新时间：2020年03月06日 11:44:43 作者：程序媛-jjl
这篇文章主要介绍了vue-router 路由传参用法,结合实例形式分析了vue-router 路由传参基本使用方法及操作注意事项,需要的朋友可以参考下
本文实例讲述了vue-router 路由传参用法。分享给大家供大家参考，具体如下：
在设置路由规则时，我们可以给路径名设置一个别名，方便进行路由跳转，而不需要去记住过长的全路径。
例如：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>routerTest1</title>
<c:import url="importFile.jsp"></c:import>
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" rel="external nofollow" >Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<%--定义跳转的路径--%>
<li class="active"> <router-link to="/home">Home</router-link></li>
<li> <router-link to="/list">List</router-link></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!—路由切换组件template 插入的位置 -->
<router-view></router-view>
</div>
</div>
<template id="users">
<div class="container">
<h1> this is list page----{{$route.path}}</h1>
<h2>用户信息</h2>
<router-link to="/list/user/001">用户{{$route.params.id}}</router-link>
<router-link to="/list/user/002">用户{{$route.params.id}}</router-link>
</div>
</template>
<script type="x-template" id="modalTel">
<div>
<h1> this is home page </h1>
<div>
<ul >
<li>
<router-link to="/home/lists">List</router-link>
</li>
<li>
<router-link to="/home/detail">Detail</router-link>
</li>
</ul>
</div>
<router-view></router-view>
</div>
</script>
<script>
/*
* var Home = Vue.extend({
template:'<h1> this is home page </h1>',
})
* */
/*使用Javascript模板定义组件*/
var Home = Vue.extend({
template:'#modalTel'
})
/*创建路由器实例*/
const router = new VueRouter({
routes:[
{ path: '/', redirect: '/home' },
{
path:'/home',
component:Home,
/*嵌套下的路由（子路由）*/
children:[
{
path:'/home/lists',
component:{
template:'<h1> this is lists pages</h1>'
},
},
{
path:'/home/detail',
component:{
template:'<h1> this is detail pages</h1>'
},
}
]
},
{
path:'/list',
component:{
/*显示路由的属性*/
template:'#users',
},
},
{
path:'/list/user/:id',
component:{
template: '<h3>用户Id{{$route.params.id}} </h3>'
}
}
]
});
const app = new Vue({
router:router
}).$mount('#app')
</script>
</body>
</html>
上文中的 importFile,jsp 在上一篇路由基本用法中介绍过了，就是引入需要的文件。
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
本文主要介绍了vue实现接口封装的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要为大家介绍了Vue 2源码解读$mount原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了antd-日历组件,前后禁止选择,只能选中间一部分的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单，常用的交互就是把表单以弹窗的形式展示，本文主要介绍了Vue实现Dialog封装，感兴趣的可以了解一下2021-07-07
今天小编就为大家分享一篇对vuex中getters计算过滤操作详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue+springboot+element+vue-resource实现文件上传教程
这篇文章主要介绍了vue+springboot+element+vue-resource实现文件上传教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要给大家介绍了Vue实现订单支付倒计时功能,倒计时这要运用在创建订单后15分钟内进行支付,否则订单取消,本文结合示例代码给大家详细讲解,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vant picker+popup 自定义三级联动案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了前端项目中的Vue、React错误监听,文章围绕主题的相关资料展开详细内容介绍需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了vue项目如何设置全局字体样式font-family问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论