接上篇序号。

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