国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

淺談vue-router 路由傳參的方法

來源:懂視網 責編:小采 時間:2020-11-27 22:22:53
文檔

淺談vue-router 路由傳參的方法

淺談vue-router 路由傳參的方法:路由傳參數。在很多時候我們需要路由上面傳遞參數,比如新聞列表頁,我們需要傳遞新聞ID,給新聞詳細頁。 1.新聞列表頁模板 <template id=news> <div> <h2>新聞列表</h2> <ul> <li> &
推薦度:
導讀淺談vue-router 路由傳參的方法:路由傳參數。在很多時候我們需要路由上面傳遞參數,比如新聞列表頁,我們需要傳遞新聞ID,給新聞詳細頁。 1.新聞列表頁模板 <template id=news> <div> <h2>新聞列表</h2> <ul> <li> &

路由傳參數。在很多時候我們需要路由上面傳遞參數,比如新聞列表頁,我們需要傳遞新聞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>

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

淺談vue-router 路由傳參的方法

淺談vue-router 路由傳參的方法:路由傳參數。在很多時候我們需要路由上面傳遞參數,比如新聞列表頁,我們需要傳遞新聞ID,給新聞詳細頁。 1.新聞列表頁模板 <template id=news> <div> <h2>新聞列表</h2> <ul> <li> &
推薦度:
標簽: 方法 VUE 方式
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 么公又大又硬又粗又爽的视频 | 在线观看日韩精品 | 99久久国产综合精品成人影院 | 亚洲第一视频区 | 爽爽窝窝午夜精品一区二区 | 日本一区二区三区视频在线观看 | 欧美高清一区二区三 | 日韩成人在线观看视频 | 国模吧国模吧一二区 | 日韩在线视频精品 | 日韩欧美国产精品第一页不卡 | 欧美性俄罗斯18精品 | 国产成人精品一区二区不卡 | 国产一区二区三区视频在线观看 | 中文字幕美日韩在线高清 | 国产成人精视频在线观看免费 | 另类亚洲色图 | 福利一区在线观看 | 在线观看国产 | 国产精品久久久久久久久免费 | 亚洲尹人九九大色香蕉网站 | 国产欧美日韩在线观看 | 国产国拍亚洲精品午夜不卡17 | 欧美国产综合在线 | 国产成人高清一区二区私人 | 国产国拍亚洲精品永久不卡 | 亚洲国产精品免费观看 | 久久精品男人影院 | 欧美日韩综合 | 亚洲欧美日韩在线观看 | 欧美视频亚洲色图 | 美女视频黄a视频全免费网站色 | 国产中文字幕在线观看 | 日韩一区二区免费视频 | 毛片一级免费 | 在线观看日韩欧美 | 欧美雌雄双性人交xxxx | 亚洲色图欧美另类 | 国产一区二区三区不卡免费观看 | 国产成人高清亚洲一区91 | 久久久无码精品亚洲日韩按摩 |