vue-router 路由傳參用法實例分析
時間:2020-03-06來源:電腦系統城作者:電腦系統城
本文實例講述了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程序設計有所幫助。
相關信息