vue-router
在index.js 顶部引入模板
在下面Vue,use(Router)注册插件
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/',
name:'index',
component:index,
redirect:'/indexContent',
children:[
{
path:'/indexContent',
name:'indexContent',
component:indexContent
}
]
},
]
名词解释 path: 路径 (‘/‘是指根路径) name: 路径名称 (通过路径传值) component:这个路由的模板 childen:子路由 redirect:默认打开的路径
name,在模板中使用``,当一个路由有子路由,那么这个路由的name是无用的路由定义,该路由有三个组件,
{
path:'/',
components:{
default:home,
left:first,
right:second
}
}
在展示这个路由的页面的路由出口分别给上定义路由时使用的组件名称(是components中左边的),然后展现时就是一一对应的展示出来,如下
<router-view>这是默认的,未取名的路由的出口</router-view>
<router-view name='left'>这是left的出口</router-view>
<router-view name='right'>这是right的出口</router-view>