這篇文章給大家介紹如何正確的使用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">
<h2> this is list page----{{$route.path}}</h2>
<h3>用戶信息</h3>
<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>
<h2> this is home page </h2>
<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:'<h2> this is home page </h2>',
})
* */
/*使用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:'<h2> this is lists pages</h2>'
},
},
{
path:'/home/detail',
component:{
template:'<h2> this is detail pages</h2>'
},
}
]
},
{
path:'/list',
component:{
/*顯示路由的屬性*/
template:'#users',
},
},
{
path:'/list/user/:id',
component:{
template: '<h4>用戶Id{{$route.params.id}} </h4>'
}
}
]
});
const app = new Vue({
router:router
}).$mount('#app')
</script>
</body>
</html>上文中的 importFile,jsp 在上一篇路由基本用法中介紹過了，就是引入需要的文件。
關于如何正確的使用vue-router 路由傳參就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
