PHP试题网_免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: 【20201211】公告:复杂试卷成功上线,问答模块很快上线……网站将有诸多变化

接上篇序号。


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兄 浏览次数:1