vue-router使用入門
阿新 • • 發佈：2018-12-12
安裝及基本配置
# 安裝 npm install vue-router # 使用 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) export default new Router({ routes: [ { path: '/', component: Index }, { path: '/about', component: About }, { path: '/login', component: Login } ] })
傳參和引數獲取
屬性傳參
# 路由
{
path: 'info/:name',
...
}
# 引數配置
<router-link to="/info/張三">張三</router-link>
# 獲取
{{$route.params.name}} // 張三雜湊傳參
# 路由
{
path: 'info',
...
}
# 引數配置
<router-link to="/info?name=李四&age=23">關於</router-link>
# 獲取
{{$route.params.name}} // 李四 23子路由
在路由中巢狀children，實現子路由配置， 子路由必須配置專屬的router-view，用於頁面渲染。
{ path: '/profile', component: Profile, children: [ { path: 'info/:name', components: { asideContent: Infos } }, { path: 'star', components: { asideContent: Star } } ] }
手動訪問和傳參
路由配置：
{
path: '/logout/:name',
name: 'logout', // 在手動跳轉的路由中使用
component: Logout
}模板配置：
# 這裡click方法不能寫在a標籤上面
<li @click="logout">
<a href="javascript:;">手動退出</a>
</li>控制器配置：
<script>
export default {
methods: {
logout() {
// 手動設定跳轉路徑
// this.$router.push('logout');
// 傳參寫法
this.$router.push({name: 'logout', params: {name: '張三'}})
}
}
};
</script>命名檢視
命名檢視多用在左選單右內容的位置，比如網站的個人中心
路由配置：
{
path: '/profile',
component: Profile,
children: [
{
path: 'info/:name',
components: {
# 這裡配置檢視展示
// default: Infos # 如果只有一個視窗，這裡可以設定預設值
asideContent: Infos
}
}
]
}模板配置：
<template>
<div class="row">
<div class="col-md-9">
# 命名檢視展示位置
<router-view name="asideContent"></router-view>
</div>
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item">
<router-link to="/profile/info/張三">個人資訊</router-link>
</li>
<li class="list-group-item">
<router-link to="/profile/star">我的積分</router-link>
</li>
<li class="list-group-item">
<router-link to="/info">個人資訊</router-link>
</li>
<li class="list-group-item">
<router-link to="/info">個人資訊</router-link>
</li>
<li class="list-group-item">
<router-link to="/info">個人資訊</router-link>
</li>
</ul>
</div>
</div>
</template>