メタ情報のルーティング
メタ：
各ルートの識別情報は、ルートの一意の情報です。メタがルートで定義されているかどうかに関係なく、this。$ route.metaを介してコンポーネントでアクセスできます。定義されていない場合は、{}を返します。
コンポーネント内：
this。$ route.metaは、コンポーネントのルーティングメタ情報を取得します。定義されていない場合は、{}を返します。
ルーティング：
router.beforeEach（（to、from、next）=> { console.log（to.meta） }）を使用して、各ルート構成アイテムにもう1つのメタ属性メタを指定します：{ }
ルーティングメタ情報の使用
各ルートの固有の情報に従って
1.ユーザーがログインしているかどうかを確認します
2.タイトルを設定し
ます3.特定のコンポーネントを表示する
かどうか4.コンポーネントがキャッシュされているかどうか...
ユーザーがログインしていることを確認し、タイトルを設定します。次に例を示します。
import Vue from 'vue'
import Router from 'vue-router'
import Header from "../components/header"
import Detail from "../components/goodsDetails"
import Login from "../components/login"
import goodsList from "../components/goodsList"
Vue.use(Router)
let router = new Router({
routes: [{
path: '/',
redirect: Header
}, {
path: '/details/:name/:price/:id',
name: 'details',
component: Detail,
meta: {
isLogin: true,
title: "详情页"
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
isLogin: false,
title: "登录页"
}
}, {
path: '/goodsList',
name: "goodsList",
component: goodsList,
meta: {
isLogin: false,
title: "列表页"
}
}
]
})
//判断是否登录
router.beforeEach((to, from, next) => {
// console.log(to);
//设置标题
document.title = to.meta.title;
//判断是否登录
let token = true;
if (to.meta.isLogin) {
if (token) {
next();
} else {
next("/login")
}
}
next();
})
export default router;
コンポーネントキャッシュ
<keep-alive>
<router-view></router-view>
</keep-alive>
<!-- 这里是需要keepalive的 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
{
path: '',
name: '',
component: ,
meta: {
keepAlive: true} // 这个是需要keepalive的
},
{
path: '',
name: '',
component: ,
meta: {
keepAlive: false} // 这是不会被keepalive的
}
キャッシュされたコンポーネントがデータをクリアしたり、初期化メソッドを実行したりする場合は、コンポーネントをロードするときに、次のようにアクティブ化されたフック関数を呼び出します。
activated: function () {
this.data = '';
}