溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“vue路由怎么創建”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue路由怎么創建”文章吧。
一、概念
路由用于設定訪問路徑，并將路徑和組件映射起來
一般用Vue做的都是單頁應用，只有一個主頁面index.html，所以你寫的<a></a>標簽是不起作用的，要使用vue-router來進行管理。
二、使用步驟
第一步：安裝
npm install vue-router
第二步：在src文件目錄下新建一個router文件夾，src/router/index.js，此處就是編寫路由組件的地方，這個文件就是路由的核心文件
//該文件專門用于創建整個應用的路由器
import VueRouter from "vue-router"
//引入組件
import About from '../pages/About'
import Home from '../pages/Home'
//創建并暴露一個路由器
const router = new VueRouter({
routes: [
{
path: '/about',
component:About
},
{
path: '/home',
component:Home
}
]
})
export default router
第三步：在入口函數里引入相關路由
import Vue from "vue";
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router/index'
Vue.config.productionTip = false
//應用插件
Vue.use(VueRouter)
//創建vue
new Vue({
el: '#app',
render: h => h(App),
router:router
})
第四步：新建兩個路由組件 ，一般存放在pages文件夾里面
第五部：配置App組件
vue中借助router-link標簽實現路由的切換
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
active-class：表示當前活躍的路由高亮顯示
<router-view></router-view>：指定組件的內容呈現位置
<template>
<div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我們使用a標簽實現頁面的跳轉 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link標簽實現路由的切換 -->
<router-link class="list-group-item" active-class="active" to="/about"
>About</router-link
>
<router-link class="list-group-item" active-class="active" to="/home"
>Home</router-link
>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定組件的呈現位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
注意點：
路由組件通常存放在pages文件夾里面 ，一般組件通常存放在components文件夾
通過切換，‘隱藏了的路由組件’，默認是被銷毀掉的，需要的時候再去掛載
每個組件都有自己的$route屬性，里面存儲著自己的路由信息
整個應用只有一個router，可以通過組件的$router屬性獲取到
三、路由嵌套
跳轉要加上父親路徑 即：/home/news
路徑：children:[
{ path:'news' ，component:News
]
注意path后面不要加 ‘/news’
比如我們要在上面基礎步驟里面的home路由組件里面嵌套兩個組件
index.js文件：
const router = new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component:News,
},
{
path: 'message',
component:Message,
}
]
}
]
那么home組件的展示區就是嵌套組件的呈現位置
home.vue
<template>
<div>
<h3>Home組件內容</h3>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item " active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item " active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<!-- 指定組件的呈現位置 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
四、路由命名
作用：可以簡化路由的跳轉
如何使用：
首先給路由命名
const router = new VueRouter({
routes:[
{
name:'guanyu',
path:'/about',
component:About
}
]
})
簡化跳轉
首先看下沒加命名的跳轉：
<router-link to ='/demo/test/about'> 跳轉 </router-link>
簡化后的，直接通過名字跳轉
<router-link to='{name:about}'> 跳轉 </router-link>
簡化寫法搭配傳遞參數
<router-link :to'{name:'about',query:{ id:m.id,title:m.title}}'>{{m.title}}</router-link>
五、query參數 和 params參數
5.1、路由的query參數
傳遞參數的方法：
方法一：跳轉路由并攜帶query參數，to的字符串寫法
<router-link :to="——/home/message/detail? id=${m.id}&title=${m.title}——">{{m.title}}</router-link>
方法二：跳轉路由并攜帶query參數，to的對象寫法
<router-link
:to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}">
{{m.title}}
</router-link>
接受參數的方法：
detail.vue
$route.query.xx
<template>
<div>
<ul>
<li>消息編碼:{{$route.query.id}}</li>
<li>消息編碼:{{$route.query.title}}</li>
</ul>
</div>
</template>
5.2、路由的params參數
配置路由：
children: [
{
name:'xiangqing',
path: 'detail/:id/:title', //使用占位符聲明接受params參數
component: Detail,
}
]
傳遞參數的方法：
方法一：跳轉路由并攜帶params參數，to的字符串寫法
<router-link :to="——/home/message/detail/${m.id}/${m.title}——">{{m.title}}</router-link>
方法二：跳轉路由并攜帶params參數，to的對象寫法
特別注意：路由攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配
<router-link
:to="{
name: 'xiangqing',
params: {
id: m.id,
title: m.title,
},
}"
>
{{ m.title }}
</router-link>
接受參數的方法：
detail.vue
$route.params.xx
<template>
<div>
<ul>
<li>消息編碼:{{$route.params.id}}</li>
<li>消息編碼:{{$route.params.title}}</li>
</ul>
</div>
</template>
六、路由的params配置
當父組件攜帶參數給子路由的時候，子路由可以直接使用，通過params配置后更加簡單
作用：讓路由組件更加方便的收到參數
之前的：<li>消息編碼:{undefined{$route.params.id}}</li>
現在的: <li>消息編碼:{undefined{id}}</li>
6.1、方法一
路由配置props 【使用少】
children: [
{
name: 'xiangqing',
path: 'detail/:id/:title', //使用占位符聲明接受params參數
component: Detail,
props: { a: '001', b: '你好' }
}
]
值為對象，該對象中的所有key-value都會以props的形式傳給Detail組件
路由接受props
路由；
<template>
<div>
<h3>{{a}}</h3>
<h3>{{b}}</h3>
</div>
</template>
export default {
name: "Detail",
props:['a','b'],
mounted() {
console.log(this.$route);
},
};
6.2、方法二
路由配置props
props值為布爾值，為true的時候，就會把該路由組件收到的多有params參數，以props的形式傳給detail組件
path: 'detail/:id/:title' ：攜帶的id和title參數都是跳轉路徑的時候攜帶的query參數或params參數
children: [
{
name: 'xiangqing',
path: 'detail/:id/:title', //使用占位符聲明接受params參數
component: Detail,
props:true
}
]
路由接受props
<template>
<div>
<ul>
<li>消息編碼:{{id}}</li>
<li>消息編碼:{{title}}</li>
</ul>
</div>
</template>
props:['id','title'],
6.2、方法三
路由配置props
children: [
{
name: 'xiangqing',
path: 'detail', //使用占位符聲明接受params參數
component: Detail,
props($route) {
return{
id: $route.query.id,
title:$route.query.title
}
}
}
]
路由接受props
<template>
<div>
<ul>
<li>消息編碼:{{id}}</li>
<li>消息編碼:{{title}}</li>
</ul>
</div>
</template>
props:['id','title'],
七、兩個新的生命周期鉤子（路由）
作用：路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態
具體名字：activated 路由組件被激活時觸發、deactivted 路由組件失活時觸發
即使將news里面的內容緩存起來，在news路由組件失活的時候，定時器也會被關閉，緩存和失活不會相互影響
export default {
name: "News",
data() {
return {
opacity: 1,
};
},
activated() {
this.timter = setInterval(() => {
this.opacity -= 0.01;
if (this.opacity <= 0) this.opacity = 1;
}, 16);
},
deactivated() {
clearInterval(this.timter);
},
};
以上就是關于“vue路由怎么創建”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
