接上篇序号。
13. 路由配置
(1). 引入vue及路由中间件并使用

(2). 引入所有页面组件

(3). 配置路由词典

(4). 导出路由配置

(5). 在main.js里导入配置的路由辞典、挂载使用

(6). 在app.vue里使用router-view渲染配置的路由组件

14. 路由跳转
(1). 第一种方法:指定 router-link 与 router-view,进行跳转

(2). 第二种方法:使用JS进行跳转 this.$router.push('/myLogin')
(3). 第三种方法:使用a标签进行跳转,a href='#/myLogin'
15. 路由传参
(1). 配置接收方(main)的路由
{ path:'/product/:id', component:product , meta: ['推广素材'] }
(2). 传参方式
①. href='#/product/123'
②. router-link to='/product/123'
③. router-link to='/product?id=123'(get传参)
④. this.$router.push('/product/123')
⑤. this.$router.push({ name:'xxx' params:{ id:id } })
⑥. this.$router.push({ path:'/xxx' query:{ id:id } })(get传参)
注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!
(3). 获取参数
①. this.$route.query.id (get传参数获取)
②. this.$route.params.id (post传参数获取)
作者:OK兄 浏览次数:20