詳解vue?route介紹、基本使用、嵌套路由
更新時(shí)間：2022年08月24日 11:19:59 作者：小余努力搬磚
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用，這篇文章主要介紹了vue?route介紹、基本使用、嵌套路由,需要的朋友可以參考下
前言
想要學(xué)習(xí)完整內(nèi)容請(qǐng)關(guān)注主頁(yè)的專欄————>Vue學(xué)習(xí)
本次的代碼段是結(jié)合體，被我分開(kāi)發(fā)文，我以在看代碼段時(shí)，已經(jīng)截圖展示，所看部分
一、介紹、安裝
1.定義
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用。
路由：route 一組key-v的對(duì)應(yīng)關(guān)系(路徑的改變對(duì)應(yīng)的組件進(jìn)行切換)
路由器：router 多個(gè)路由需要路由器管理
為了實(shí)現(xiàn)單頁(yè)面應(yīng)用
2.安裝
npm i vue-router@3 安裝3版本
如果使用 vue ui 就沒(méi)有以下的操作，因?yàn)樵趧?chuàng)建項(xiàng)目的時(shí)候已經(jīng)配置好了
1：在src根目錄創(chuàng)建router目錄，在目錄中創(chuàng)建index.js，代碼如下：
import Vue from 'vue';
//導(dǎo)入vue-router
import VueRouter from 'vue-router'
//應(yīng)用插件
Vue.use(VueRouter)
//創(chuàng)建router規(guī)則對(duì)象
const routes = [
]
//創(chuàng)建router
const router = new VueRouter({
routes
})
//導(dǎo)出router
export default router2：main.js 中進(jìn)行掛載
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')二、基本使用（代碼后賦）
以下例子展現(xiàn)路由的基本使用
css樣式已經(jīng)寫(xiě)好了，直接實(shí)現(xiàn)路由效果
展示效果
首先學(xué)習(xí)的效果
代碼（看對(duì)應(yīng)的代碼段） app.vue代碼，此代碼含有樣式
<template>
<div id="root">
<div class="main">
<div class="header">
<h1>路由的演示</h1>
<button @click="back">后退</button>
</div>
</div>
<div class="main">
<div class="left">
<ul>
<li><router-link to="/about" active-class="hover">公司簡(jiǎn)介</router-link></li>
<li><router-link to="/contaactus" active-class="hover">聯(lián)系方式</router-link></li>
<li><router-link to="/persons" active-class="hover">公司人員</router-link></li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
<div style="clear: both;"></div>
</div>
</div>
</template>
<script>
export default {
name:'App',
methods: {
back(){
this.$router.back()
}
},
components:{
},
}
</script>
<style>
.c{
clear: both;
}
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
a{text-decoration: none;}
.main{width: 800px;margin: auto;}
.header{box-sizing: border-box;padding: 20px;border:1px solid #666;}
.left{
height: 500px;
border: 1px solid #666;
width: 200px;
float: left;
}
.left li{
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid #666;
width: 100%;
}
.left li a{
color: #333;display: block;
}
.left li a.hover{
background: blue;color: #fff;
}
.right{float: right;
border:1px solid #61DAFB;
width: 590px;
height: 500px;
}
.nav li{
float: left;
}
.nav li a{
width: 150px;
text-align: center;
height: 40px;line-height: 40px;
text-align: center;
border:1px solid #000000;
display: block;
}
.nav li a.hover{
background: #0000FF;color: #fff;
}
</style>三個(gè)路由組件的代碼
about
<template>
<div>
<!-- <div class="left"> -->
<ul class="nav">
<li><router-link to="/about/year" active-class="hover">創(chuàng)建年份</router-link></li>
<li><router-link to="/about/people" active-class="hover">創(chuàng)建人</router-link></li>
</ul>
<!-- </div> -->
<keep-alive include="People">
<router-view class="c"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
</style>ContaactUs
<template>
<div>
聯(lián)系方式
</div>
</template>
<script>
export default {
name: 'ContaactUs',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
</style>persons
<template>
<div>
<ul >
<li v-for="item in persons" :key="item.id">
<router-link :to="`/persons/show/${item.id}/${item.realname}`">姓名：{{item.realname}}</router-link>
<!-- <router-link :to="`/persons/show/?id=${item.id}&realname=${item.realname}`">姓名：{{item.realname}}</router-link> -->
<!-- <router-link :to="{name:'show',query:{id:item.id,realname:item.realname}}">姓名：{{item.realname}}</router-link> -->
<button @click="push(item)">點(diǎn)擊跳轉(zhuǎn)</button>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Persons',
data(){
return{
persons:[
{id:1,realname:'張三'},
{id:2,realname:'李四'},
{id:3,realname:'王五'},
{id:4,realname:'趙六'}
]
}
},
methods: {
push(item){
this.$router.push(`/persons/show/${item.id}/${item.realname}`)
},
},
}
</script>
<style>
</style>router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import About from '../pages/About'
import ContaactUs from '../pages/ContaactUs'
import Persons from '../pages/Persons'
// import Show from '../pages/Show'
// import Profile from '../pages/Profile'
// import People from '../pages/People'
const routes = [
{
path:'/about',
component:About,
children:[
// {name:'profile',path:'/about/year',component:Profile,meta:{isAuth:true}},
// {name:'people',path:'/about/people',component:People,meta:{isAuth:true}},
// {
// path:'/about',
// redirect:'/about/year'
// },
]},
{
path:'/contaactus',
component:ContaactUs
},
{
path:'/persons',
component:Persons,
// children:[
// {
// path:'show/:id/:realname',component:Show,props:true
// // name:'show', path:'show',component:Show
// }
// ]
},
{
path:'/',
redirect:'/about'
},
]
const router = new VueRouter({
mode:'history',
routes
})
// router.beforeEach((to,from,next)=>{
// if(to.name=="people" || to.name=="profile"){
// if(localStorage.getItem("token")=="123"){
// next();
// }
// }else{
// next();
// }
// })
// router.beforeEach((to,from,next)=>{
// if(to.meta.isAuth){
// if(localStorage.getItem("token")=="123"){
// next();
// }
// }else{
// next();
// }
// })
export default router以上就能實(shí)現(xiàn)，視屏上的的切換的路由效果，如果有不懂的，私信問(wèn)我，源碼私聊免費(fèi)提供
三、嵌套路由
1.布局邏輯
嵌套路由在，最開(kāi)始的路由下，加入路由
在about路由組件中
再次創(chuàng)建兩個(gè)路由組件，點(diǎn)擊是，獲得相對(duì)應(yīng)的內(nèi)容，實(shí)現(xiàn)路由效果
2.效果展示
3.代碼
about
<template>
<div>
<!-- <div class="left"> -->
<ul class="nav">
<li><router-link to="/about/year" active-class="hover">創(chuàng)建年份</router-link></li>
<li><router-link to="/about/people" active-class="hover">創(chuàng)建人</router-link></li>
</ul>
<!-- </div> -->
<keep-alive include="People">
<router-view class="c"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
</style>兩個(gè)路由組件
Profile
<template>
<div>
2002 08-20
</div>
</template>
<script>
export default {
name:'Profile',
// beforeDestroy () {
// console.log('已銷毀');
// },
}
</script>
<style>
</style>People
<template>
<div>
<span>傅小余</span> <input type="text">
</div>
</template>
<script>
export default {
name:"People",
// beforeDestroy () {
// console.log('已銷毀');
// },
}
</script>
<style>
</style>四、注意
這里我都使用到了默認(rèn)路徑，所以頁(yè)面點(diǎn)開(kāi)就會(huì)有展示效果
代碼如下
第一個(gè)里面的默認(rèn)
{
path:'/',
redirect:'/about'
},第二個(gè)
{
path:'/about',
redirect:'/about/year'
},到此這篇關(guān)于詳解vue route介紹、基本使用、嵌套路由的文章就介紹到這了,更多相關(guān)vue route嵌套路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue elementUI使用tabs與導(dǎo)航欄聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue elementUI使用tabs與導(dǎo)航欄聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑
這篇文章主要介紹了vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue菜單欄聯(lián)動(dòng)內(nèi)容頁(yè)面tab的實(shí)現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動(dòng)內(nèi)容頁(yè)面tab的實(shí)現(xiàn)示例,左側(cè)菜單欄與右側(cè)內(nèi)容部分聯(lián)動(dòng),當(dāng)點(diǎn)擊左側(cè)的菜單,右側(cè)會(huì)展示對(duì)應(yīng)的tab,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
詳解如何從零開(kāi)始搭建Express+Vue開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解如何從零開(kāi)始搭建Express+Vue開(kāi)發(fā)環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了詳解使用vue實(shí)現(xiàn)tab操作,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動(dòng)態(tài)數(shù)據(jù)顯示
同大多數(shù)的前端框架一樣，先讀官網(wǎng)的使用方法。學(xué)會(huì)基本使用后，在實(shí)例中找到自己想要demo。拿過(guò)來(lái)改一改，一個(gè)echarts圖表就形成，畢竟人家做就是為了方便使用，這篇文章主要介紹了Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動(dòng)態(tài)數(shù)據(jù)顯示2022-10-10
Vue中的this.$options.data()和this.$data用法說(shuō)明
這篇文章主要介紹了Vue中的this.$options.data()和this.$data用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue偵測(cè)相關(guān)api的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue偵測(cè)相關(guān)api，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
過(guò)濾器，本質(zhì)上就是一個(gè)函數(shù)。其作用在于用戶輸入數(shù)據(jù)后，它能夠進(jìn)行處理，并返回一個(gè)數(shù)據(jù)結(jié)果。下面這篇文章主要給大家介紹了Vue.js中過(guò)濾器的相關(guān)資料,需要的朋友可以參考借鑒，一起來(lái)看看吧。2017-01-01
vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04