1.解决传参不刷新方式:
App.vue 界面
3.钩子函数案例:
App.vue界面:
VipPage.vue界面:
4.路由元信息:
在router下的index.js配置路由元信息:
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},{
path:'/AboutPage',
name:'aboutpage',
component:()=>import('@/views/AboutPage.vue'),
/* 局部路由钩子 */
beforeEnter: (to, from, next) => {
console.log(to);
console.log(from);
next()
}
{
path:'/meta',
name:'metapage',
component:()=>import('@/views/MetaPage.vue'),
meta:{
title:'路由元信息',
flag:true
}
}
]