<vue-router第一弹>vue-router之子路由和路由传参(前端网备份)
VUE的两种跳转push和replace对比区别
https://www.jianshu.com/p/b3f4c1b3aab2
先来路由的3种写法
第二种是路由懒加载的写法
还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了
找到build下面的webpack.prod.conf.js 添加 publicPath:"./",
具体看这一篇
https://www.cnblogs.com/lijuntao/p/7777581.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//router的3种写法 import Home from '@/components/Home/home' const routers = [ { path: '/', name: 'HelloWorld', component: () => import('@/components/HelloWorld') }, { path: '/home', name: 'Home', component: (resolve) => { require(['@/components/Home/home'], resolve) } }, { path: '/list', name: 'List', component: Home }, ] export default routers
主页home.vue(用的iview里面得Menu @on-select="turnToPage")
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<MenuItem name="/1"> <Icon type="ios-navigate"></Icon> Item 1 </MenuItem> <div> <router-view></router-view> </div>
turnToPage (route) {
this.$router.push(route);
}
router.js
import te from "@/views/main/index.vue"
{
path: '/',
meta: {
title: 'home'
},
component: () => import('@/components/home.vue'),
children: [{
path: '1',
component: te,
name:'r1',
children: [
{
path: '3/:id/:state',
name:'r2-4',
component: () =>import('@/views/test2/3.vue')
}
]
}],
}
index.vue(路由传参点击页)
<router-link :to="{ name:'r2-4',params: { id: 123,state:'试试'}}" ><MenuItem name="">正确</MenuItem></router-link>
<div>
<router-view></router-view>
</div>
3.vue(路由传参接收页)
{{this.$route.params}} 可以打印出多项参数
//{ "id": "123", "state": "试试" }
总结:
1>子路由的显示结果类似于在页面中嵌套iframe的表现形式;
2>路由传参有2种方式:
2-1>params;//类似post传参,就是上面例子中的
然后在浏览器地址上的显现形式是http://localhost:8080/#/1/3/123/试试
需要注意3点:
1)跳转的时候<router-link :to="{ name:'r2-4',params: { id: 123,state:'试试'}}" ><MenuItem name="">正确</MenuItem></router-link>的params;params必须要有name
2)router.js里面path: '3/:id/:state';
3)输出页面里面{{this.$route.params}}
2-2>query;//类似get传参,通过URL传递参数
然后在浏览器地址上的显现形式是http://localhost:8080/#/1/3?id=123&state=试试
需要注意2点:
1)跳转的时候<router-link :to="{ name:'r2-4',query: { id: 123,state:'试试'}}" ><MenuItem name="">正确</MenuItem></router-link>的query
2)router.js里面path: '3',不需要跟参数
3)输出页面里面{{this.$route.query}}
3>路由跳转时候的2种写法
3-1>声明式的导航就是<router-link :to="...">,如上面例子所写
需要注意的是不管query还是params必须要有name都必须有name
3-2>编程式的导航形式就是router.push(...)
需要注意的是:
1)跳转的时候
this.$router.push({path:route,query:{id:1,state:'试试'}});
params必须要有name,而query不需要name
this.$router.push({path:route,name:'r2-4',params:{id:1,state:'试试'}});
2)router.js里面path: '3',2种都不需要跟参数
3)输出页面里面{{this.$route.query}}{{this.$route.params}}
后续重点补充之query与params的实用区别
(并不是上面总结的区别,虽然上面用法没错)
首先params还是上面的用法,主要是用name来找,query的用法宽松,所以就有了以下的用法,
最重要的区别就是如果知道具体地方,用name去找的这种就用params传参,如果只知道是子路由,并不清楚是子路由里面哪一个的时候,就用query然后用path:来找路径
router.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ path: '/', meta: { title: 'home' }, component: () => import('@/components/home.vue'), children: [{ path: '1', component: te, name:'r1', children: [{ path: 'te', name:'r2-1', component: () =>import('@/views/test2/2.vue') }, { path: '2', name:'r2-2', component: () =>import('@/views/test2/4.vue') }, { path: '2-1', name:'r2-3', component: () =>import('@/views/test2/3-1.vue') }, { path: ':username', component: () =>import('@/views/test2/3-2.vue') },
index.vue
<router-link :to="{ path:'1/user',query: { id: 123,state:'试试'}}" ><MenuItem name="">2</MenuItem></router-link>
3-2.vue
{{this.$route.params}}{{this.$route.query}}
打印出来的就是{ "username": "user" }{ "id": "123", "state": "试试" }