<vue-router第一弹>vue-router之子路由和路由传参(前端网备份)

先来路由的3种写法

第二种是路由懒加载的写法
还有一点：是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错，报文件引用错误其实是打包时候路径配置有点问题修改下就好了
找到build下面的webpack.prod.conf.js 添加 publicPath："./",
具体看这一篇
https://www.cnblogs.com/lijuntao/p/7777581.html

//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"）

<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

 {
        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": "试试" }