1 <router-view></router-view> 路由显示的位置
<router-link></router-link> 相当于a连接 或者 this.$router.push({path:})
2 mode
router 文件夹中的index.js 文件
export default new Router({
mode:"history",
routes: []
})
- history url http://localhost:8080/goods/img
- hash URL http://localhost:8080/#/goods/img
3 动态路由
index.js /user/:name url /user/zlt {{ $route.params.name}} 页面显示zlt
4路由嵌套
index.js
export default new Router({
routes: [
{
path: '/goods',
name: 'gl',
component: gl,
children:[
{path:'title',
name:'title',
component:title
},
{path:'img',
name:'img',
component:img
}
]
}
]
})
gl.vue 父组件
<router-link to="/goods/title">标题</router-link>
<router-link to="/goods/img">照片</router-link>
<div>
<router-view></router-view>
</div>