(4) vue路由

纵饮孤独 提交于 2020-01-18 06:39:01

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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!