App.vue
出来的效果就是这样的:
如果想取得query,也可以通过$route来获取
Profile.vue
第二种传参方式:
App.vue
导航守卫
我们可以发现在进行网页跳转时,...我们的标题并不会发生变化,这是因为我们index里面的标题就是router-test
这个时候可以用到生命周期函数,当我们进行到某些步骤时,可以调用这些函数
以此类推,About的页面和User的页面都可以这么设置...beforeEach方法(前置守卫),当我们的路由从一个跳转到另一个时就会调用这个函数,在跳转前回调.导航守卫中的导航表示路由正在发生改变
因为如果像首页那种有嵌套路由的情况直接取meta就是空的,所以在...matched中查找
为什么使用导航守卫:
keep-alive
我们设置的首页重定向了news新闻,当我们点击了首页的消息以后,又点击了关于的按钮,如果再跳转回首页,下面的消息又变回了新闻,这样的体验不是很好...router-view也是一个组件,如果直接被包在keep-alive里,所有路径匹配到的视图组件都会被缓存
Keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染