1.在router目录下index文件配置好路由,需在app.vue这个主组件里添加显示路由代码router-view,否则无法显示
页面跳转:app里添加router-view ,其他页面使用router-link,也可以使用 this.$router.push("/Home");进行跳转
router-view相当在其app主组件占位置
2.使用<router-link to='/Home'>home</router-link>点击home跳转到Home组件页面,to属性设置跳转路径
3.嵌套路由:点击导航栏只改变下面数据,导航栏不变,url会拼接children的路径
```
children: [ {
path: 'profile',
component: UserProfile
},
]
4.重定向redirect:用户输入url会自动跳转到Home页面
{
path: '/',
redirect: '/Home',
}
5.用户在输入找不到的url可以全部重定向到其他页面
{ path: '*', redirect: '/Home', }
6.keep-alive缓存不活跃的组件,提高性能 方法一:
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
```
方法二:
也可以使用include='需要缓存的文件名'