vue-router之子路由和路由傳參(前端網備份)

先來路由的3種寫法

第二種是路由懶加載的寫法
還有一點：是我遇到的若是你遇到了就看下——就是用了懶加載後打完包直接運行那個index.html會報錯，報文件引用錯誤實際上是打包時候路徑配置有點問題修改下就行了
找到build下面的webpack.prod.conf.js 添加 publicPath："./",
具體看這一篇
http://www.javashuo.com/article/p-svtcljsl-t.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

View Code

主頁home.vue（用的iview裏面得Menu @on-select="turnToPage"）

<MenuItem name="/1">
                            <Icon type="ios-navigate"></Icon>
                            Item 1
                        </MenuItem>
  <div>
                <router-view></router-view>
            </div>

View Code

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')
                    },

View Code

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": "試試" }