因为一个页面有很多相同的样式,所以我们可以使用router-view组件来实现点击导航不刷新页面的效果,只在当前页面打开内容。
最主要的是router.js路由,写法如下:
import Index from '../pages/index'
{
path: '/',
name: 'index',
component: Index
},{
path:'/nav',
name:'nav',
component:()=>import('../pages/nav'),
redirect: '/start',
children:[
{
path:'/start',
name:'start',
component:()=>import('../pages/start')
}
]
}
在路由nav下边编写需要在当前页面展示的所有页面作为子路由,redirect后边的是默认显示的第一个页面的路径。
路由写完之后在nav.vue中加上router-view标签
至此,便完成了router-view组件的使用