詳解vue-router 命名路由和命名視圖
更新時間：2018年06月01日 08:32:55 作者：侯婧歡
這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
說明：vue-router的幾個文章中例子是連貫的，因此對哪塊有疑問請翻閱按發(fā)表時間排序的其他文章。
一、概述
- 給路由定義不同的名字，根據(jù)名字進行匹配
- 給不同的router-view定義名字，router-link通過名字進行對應(yīng)組件的渲染。
二、代碼展示：
目錄視圖
1、命名路由
2、命名視圖
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Goodlists from '@/Goodlists/goods'
import Title from '@/Goodlists/title'
import Img from '@/Goodlists/img'
import Cart from '@/Goodlists/cart'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/goods',
name: 'Goodlists',
components:{
default:Goodlists,
title:Title,
image:Img,
}
}
]
})
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
<router-view name="title" class="left"></router-view>
<router-view name="image" class="right"></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.left,.right{
float: left;
width:48%;
text-align: center;
border:1px solid red
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了Vue使用QrcodeVue生成二維碼并下載的示例,文章中有詳細的代碼示例供大家參考,感興趣的小伙伴可以參考閱讀下2023-08-08
登錄注冊是最常用的網(wǎng)站功能,本文主要介紹了Element實現(xiàn)登錄+注冊的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-09-09
Luckysheet?在vue中離線使用及引入報錯的解決方案(推薦)
這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報錯的解決方案,將dist離線包在項目創(chuàng)建個文件夾放著，然后根據(jù)放置的位置在?index.html里面引入，下面通過案例給大家介紹我的項目里面放置的位置，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue項目使用axios封裝request請求，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue動態(tài)綁定多個class以及帶上三元運算或其他條件
這篇文章主要介紹了vue動態(tài)綁定多個class以及帶上三元運算或其他條件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
項目中需要使用websocke，這個是我自己修修改改好多次之后用得最順手的一版，分享一下。這個封裝需要搭配vuex使用，因為收到的數(shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問題2022-09-09
vue項目打包過后發(fā)現(xiàn)地址錯了或者發(fā)布到別的服務(wù)器發(fā)現(xiàn)請求的地址不對,每次都要去重新打包,太浪費時間,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包后可修改基礎(chǔ)接口地址配置的具體操作,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue?收集表單數(shù)據(jù)方法詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要為大家介紹了Xx-vue自定義指令實現(xiàn)點擊水波紋漣漪效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07