如何正確的使用vue-router路由傳參

這篇文章給大家介紹如何正確的使用vue-router 路由傳參，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、鹿邑網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鹿邑等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

在設(shè)置路由規(guī)則時(shí)，我們可以給路徑名設(shè)置一個(gè)別名，方便進(jìn)行路由跳轉(zhuǎn)，而不需要去記住過長(zhǎng)的全路徑。

例如：

<%@ 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">
          <%--定義跳轉(zhuǎn)的路徑--%>
          <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'
  })
 
  /*創(chuàng)建路由器實(shí)例*/
  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 路由傳參

關(guān)于如何正確的使用vue-router 路由傳參就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：如何正確的使用vue-router路由傳參
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article8/geisop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站維護(hù)、App設(shè)計(jì)、服務(wù)器托管、全網(wǎng)營(yíng)銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何正確的使用vue-router路由傳參