2 つの新しいライフサイクル フック
アクティブ化と非アクティブ化はルーティング コンポーネントに固有の 2 つのフックで、特定の用途のルーティング コンポーネントのアクティブ化ステータスを取得するために使用されます。
アクティブ化ルートコンポーネントがアクティブ化されるとトリガーされます。
非アクティブ化されたルーティング コンポーネントが非アクティブ化されるとトリガーされます
src/pages/News.vue
<template>
<ul>
<li :style="{opacity}">欢迎学习Vue</li>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</template>
<script>
export default {
name: 'News',
data() {
return {
opacity: 1,
}
},
activated() {
console.log('News组件激活了');
this.timer = setInterval(() => {
this.opacity -= 0.01
if (this.opacity <= 0) this.opacity = 1
}, 16)
},
deactivated() {
console.log('News组件失活了');
clearInterval(this.timer)
}
}
</script>
ルートガード
ルーティング権限の制御
メタメタデータオブジェクト
グローバル ルート ガード
src/ルーター/index.js
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
const router= new VueRouter({
routes: [
{
name:'guanyu',
path: '/about',
component: About,
meta:{title:'关于'}
},
{
name:'zhuye',
path: '/home',
component: Home,
meta:{title:'主页'},
children: [
{
name:'xinwen',
path: 'news',
component: News,
meta:{isAuth:true,title:'新闻'}
},
{
name:'xiaoxi',
path: 'message',
component: Message,
meta:{isAuth:true,title:'消息'},
children: [
{
name:'xiangqing',
// path: 'detail/:id/:title', //使用占位符声明接收params参数
path:'detail', //使用query参数
component: Detail,
meta:{isAuth:true,title:'详情'},
//第一种写法：props值为对象，该对象中所有的key-value的组合都会通过props传给Detail组件
// props:{a:'100',b:'1'},
//第二种写法：props值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true,
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return{
id:$route.query.id,
title:$route.query.title
}
}
}
]
}
]
}
]
})
// 全局前置路由守卫--初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
})
// 全局路由后置守卫--初始化的时候、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
document.title=to.meta.title||'硅谷系统'
})
export default router専用ルートガード beforeEnter
src/ルーター/index.js
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
{
name: 'guanyu',
path: '/about',
component: About,
meta: { title: '关于' }
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: { title: '主页' },
children: [
{
name: 'xinwen',
path: 'news',
component: News,
meta: { isAuth: true, title: '新闻' },
// 独享前置路由守卫
beforeEnter: (to, from, next) => {
console.log('beforeEach', to, from)
if (to.meta.isAuth) { //判断是否需要鉴权
if (localStorage.getItem('school') === 'atguigu') {
next()
} else {
alert('学校名不对，无权限查看！')
}
} else {
next()
}
}
},
{
name: 'xiaoxi',
path: 'message',
component: Message,
meta: { isAuth: true, title: '消息' },
children: [
{
name: 'xiangqing',
// path: 'detail/:id/:title', //使用占位符声明接收params参数
path: 'detail', //使用query参数
component: Detail,
meta: { isAuth: true, title: '详情' },
//第一种写法：props值为对象，该对象中所有的key-value的组合都会通过props传给Detail组件
// props:{a:'100',b:'1'},
//第二种写法：props值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true,
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route) {
return {
id: $route.query.id,
title: $route.query.title
}
}
}
]
}
]
}
]
})
// 全局路由后置守卫--初始化的时候、每次路由切换之后被调用
router.afterEach((to, from) => {
console.log('afterEach', to, from)
document.title = to.meta.title || '硅谷系统'
})
export default router
コンポーネント内の配線ガード
/home から /about にジャンプする前に beforeRouteEnter をトリガーし、/about から /test にジャンプする前に beforeRouteLeave をトリガーします。
src/pages/About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: 'About',
beforeRouteEnter (to, from, next) {
console.log('About--beforeRouteEnter',to,from);
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学生名不对，无权查看！')
}
},
beforeRouteLeave(to, from, next){
console.log('About--beforeRouteLeave',to,from);
next()
}
}
</script>ルーターの 2 つの動作モード
const router=new VueRouter({
mode:'history',
routes:[...]
})
export default routerプロジェクトのパッケージ化 npm run build
デモディレクトリ
最初のステップ: npm init が表示されます パッケージ名:atguigu_test_server
ステップ 2: npm i Express
ステップ 3: npmjs.com Web サイトを開き、connect-history-api-fallback を検索します
npm i connect-history-api-fallback
