vue-Router

111 阅读1分钟
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='需要缓存的文件名'